I am trying to set the width of an element based on screen width. My code works perfectly on desktops and most mobile devices except the galaxy note 2. I've tried this query but to no avail
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// my css here
}
The galaxy Note II will switching the innerHeight and Screen.height during the rotation. The innerHeight/Width and Screen.Height/Width are listed below
Portrait innerHeight/Screen.Height 615/1280
innerWidth/Screen.Width 360/720
Landscape innerHeight/Screen.Height 335/720
innerWidth/Screen.Width 640/1280
According to this article
http://tripleodeon.com/2011/12/first-understand-your-screen/
the media query min/max-device-height/width is equal to screen.height/width
So for Galaxy Note II, my media query is listed below
/* Galaxy Note2 - Portrait */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-height: 1200px) and (max-device-height: 1300px) and (orientation: portrait) {
Code here
}
/* Galaxy Note2 - landscape Due to the Screen Height and Width is changing during orientation changes */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1270px) and (max-device-width: 1300px) and (orientation: landscape) {
Code here
}
You could target just that phone with a conditional stylesheet. It's kind of like fixing a dent with a sledgehammer but it will work. You can parse the user agent string and add a stylesheet for just that phone model.
Related
I've seen the CSS media query below recommended to target phones. Yes, it works for my phone. However, my phone, and many others, have resolution width 1080px. How does it work...?
#media screen and (max-width: 1024px) { }
Every devise has physical pixel size and a ratio for browsers. For instance iPhoneX has with 1125px and a ratio 3. So the CSS width will be 375px.
So for it's screen with physical resolution 1125px your media will be
#media screen and (max-width: 375px) { }
Very good table with devises resolutions, ratios and CSS scale here:
https://www.mydevice.io/#compare-devices
Although you can determine in media the -webkit-device-pixel-ratio and orientation, like this
/* iPhone X in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}
More about it here http://stephen.io/mediaqueries/
I have the following media screens:
/*
768px - 1280px
WXGA - (Windows Phone com DPI alta)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: landscape){}
/*
1024px - 768px
XGA - (Ipad)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape){}
/*
1366px - 768px
WXGA - (Ultrabook)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: landscape){}
However, there are three (3) rearrangements that have the same pixel,
So he is entering the first 768px without being able to modify it for others.
I would like to know how I do to fix this, since I have (3) resolutions that are as follows:
768x1280
1024x768
1366x768
I assume you don't just want to use this for just few lines of code, but rather for a medium sized/big project.
Your approach is too robust and hard coded. You don't necessary need to be this specific for every device and screen size. This would mean a lot of repeated code.
On your design implementation, focus on the combination between relative + and fixed sizes for elements. (check some well coded responsive template examples)
Then, use #media queries to watch general screen sizes and apply specific changes for these.
A example would be:
/*
768px - 1024px
XGA - (Ipad)
AND
768px - 1280px
WXGA - (Windows Phone com DPI alta)
*/
#media only screen
and (min-width: 768px)
and (max-width: 1280px) {
}
/*
WXGA - (Ultrabook)
768px - 1366px
*/
#media only screen
and (min-width: 1281px)
and (max-width: 1680px) {
}
NOTE: I have replaced device-width(deprecated and often unnecessary) with width.
If you want to check a comparison between them: https://www.sitepoint.com/media-queries-width-vs-device-width/
I have these two but they are not working. I'm simulating in Chrome
/* Landscape*/
#media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* Portrait*/
#media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
If I remove 'and (orientation: landscape)' then the css in there works in the first media query.
What is the correct orientation, for both landscape and portrait ?
The HTML meta is set as
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
I don't have an iPad Pro but this works for me in the Chrome simulator.
/* Landscape*/
#media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* Portrait*/
#media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
Portrait medias query for iPad Pro should be fine as it is.
Landscape media query for iPad Pro (min-device-width) should be 1366px and (max device-height) should be 1024px.
Hope this helps.
Note that there are multiple iPad Pros, each with a different Viewports: When emulating an iPad Pro via the Chrome developer tools, the iPad Pro (12.9") is the default option. If you want to emulate one of the other iPad Pros (10.5" or 9.7") with a different viewport, you'll need to add a custom emulated device with the correct specs.
You can search devices, viewports, and their respective CSS media queries at: http://vizdevices.yesviz.com/devices.php.
For instance, the iPad Pro (12.9") would have the following media queries:
/* Landscape */
#media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }
/*Portrait*/
#media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }
Whereas the iPad Pro (10.5") will have:
/* Landscape */
#media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }
/*Portrait*/
#media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }
I can't guarantee that this will work for every new iPad Pro which will be released but this works pretty well as of 2019:
#media only screen and (min-width: 1024px) and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
/* ... */
}
This worked for me
/* Portrait */
#media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
#media only screen
and (min-width: 1112px)
and (max-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
}
Too late but may this save you from headache!
All of these is because we have to detect the target browser is a mobile!
Is this a mobile then combine it with min/max-(width/height)'s
So Just this seems works:
#media (hover: none) {
/* ... */
}
If the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none!
There are many cases that you can read from bellow links.
Described as well Also for browser Support See this from MDN
I tried several of the proposed answers but the problem is that the media queries conflicted with other queries and instead of displaying the mobile CSS on the iPad Pro, it was displaying the desktop CSS. So instead of using max and min for dimensions, I used the EXACT VALUES and it works because on the iPad pro you can't resize the browser.
Note that I added a query for mobile CSS that I use for devices with less than 900px width; feel free to remove it if needed.
This is the query, it combines both landscape and portrait, it works for the 12.9" and if you need to target the 10.5" you can simply add the queries for these dimensions:
#media only screen and (max-width: 900px),
(height: 1024px) and (width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
(width: 1024px) and (height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {
// insert mobile and iPad Pro 12.9" CSS here
}
For those who want to target an iPad Pro 11" the device-width is 834px, device-height is 1194px and the device-pixel-ratio is 2. Source: screen.width, screen.height and devicePixelRatio reported by Safari on iOS Simulator.
Exact media query for portrait: (device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)
iPad Pro 12th Gen - 2022, I have tried, and it worked.
Portrait:
#media only screen and (width: 1024px) and (height: 1292px) {}
Landscape:
#media only screen and (width: 1366px) and (height: 950px) {}
I'm making a template that is adaptable for mobile in landscape and portrait mode, i have to "remove" some objects because there is no space in landscape, then I used display:none in the landscape, and set the normal dimensions for portrait, but when I go into the phone, and make the switch landscape to portrait the objects disappear even in portrait mode...
more or less the css structure is this:
#media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) and (device-width: 1080px) and (orientation: portrait) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}}
#media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) and (device-width: 1920px) and (orientation: landscape) {.object {display:none}}
any advice? :)
In your media queries you say that every device with -webkit-min-device-pixel-ratio: 1.5 gets both of the CSS properties....
If you only want to make a difference between landscape and portrait, you should youse something like this:
#media only screen and (orientation: portrait) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}}
#media only screen and (orientation: landscape) {.object {display:none}}
The other media queries are not necesarry.
I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.