I am using iPhone4 to test my responsive website
I had read that retina display will show 1px as 2px...
so my doubt is in landscape the device width 480px, screen resolution 640px..
but which one i want to use
#media only screen (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
or
#media only screen (max-device-width : 640px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
No matter what their resolution, you target all iPhones at 320px in portrait mode, and iPhone4S and under stick with 480px in landscape mode. (5 is a little wider in landscape.)
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'm currently working on a project where it needs to be user friendly for multiple devices but came across issues on devices themselves when targeting devices with one of the two viewport that a re the same and still not able to find a solution for it.
I am using media queries to archieve this, of course sounds far enough but there is no explanation online to separate an iPad mini with this syntax
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : landscape) {}
And this
#media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait) {}
And an iPad Pro
#media only screen and (min-device-width : 1024px)
and (max-device-width : 1366px) and (orientation : landscape) {}
And this
#media only screen and (min-device-width : 1024px)
and (max-device-width : 1366px) and (orientation : portrait) {}
I am testing with the Chrome devtool for devices and is fine when i start with the biggest ipad but when i then go on with the smallest(mini), it overwrite the previous changes because the css is read from top to bottom so i am so confused please guys can you help me to understand better this concept?
Also for mobiles i have this multiple lines of code one for each mobile (iPhone 5, 6 ,6+ but still same issues)
iPhone 5
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
iPhone 6
#media only screen and (min-device-width: 375px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
#media only screen and (min-device-width: 375px) and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
iPhone 6+
#media only screen and (min-device-width : 320px) and (max-device-width : 767px)
and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {}
#media only screen and (min-device-width : 320px) and (max-device-width : 767px)
and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) {}
Literally I don't know how to be more specific then this but also here the iphone 5 because is the last one in the css is overwriting some stile in the iphone 6 or 6+.
How about writing different style sheets for each device
I would use just min-width instead of min-device-width and similar. A 768px x 1024px device with retina display (iPad Mini) actually has 1536px x 2048px device pixels (if the pixel taio is 2:1), so you either have to use the true device pixel size or use CSS pixel size.
How to target media queries for Samsung tab 8.4 inch.
my code is
#media (device-width: 800px) and (device-height: 1280px)
when first appearance media query is getting affected. once changed the orientation from Portrait to Landscape and again back to Portrait, style is not getting affected.
Device Specification :
http://www.gsmarena.com/samsung_galaxy_tab_s_8_4-6439.php
Thanks in advance
I can't test my solution on physical device, but you can play with orientation:
Landscape mode
#media only screen and (max-device-width : 1280px) and (orientation : landscape) {
/* Styles for landscape*/
}
Portrait mode
#media only screen and (max-device-width : 800x) and (orientation : portrait) {
/* Styles for portrait*/
}
Notice, that different browsers (chrome, android native browser, firefox etc.) handle media queries in different way. For example if you use:
#media only screen and (max-width : 480px)
it would work on Desktop Chrome browser and on android smartphone browser, but not on Safari on iPhone. To make it work on Safari you have to use:
#media only screen and (max-device-width : 480px)
The conclusion is that you need test your media queries on physical devices :)
For more information, check this page: http://www.w3.org/TR/css3-mediaqueries/
I have the following media query:
#media screen and (max-width: 480px) {
When viewing the website in portrait mode on my Nexus 5, it looks the way I want. However, when I turn the phone over to landscape mode, it shows the full site and not what is specified within this media query.
Why is this happening? I've also tried:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
This did not resolve the issue.
Actually Nexus 5 Landscape width is 590px and you have given the max-width:480px....
See the view-port sizes
You can give the media queries like this also :-
#media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}
#media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}
it should work for you... try with this
The nexus 5's effective screen dimensions are 360x598 so in landscape the viewport is wider than the highest end of your media query. You can capture the landscape orientation of the nexus 5 by increasing your max-width to 599px.
#media screen and (max-width: 599px) { ... }
reference
I have this media query:
#media only screen
and (max-width : 320px),
only screen
and (max-device-width : 320px)
and (min-device-pixel-ratio : 2),
only screen
and (max-device-width : 320px)
and (-webkit-min-device-pixel-ratio : 2),
only screen
and (max-device-width : 320px) {
It selects browsers on a desktop less than 320px in width, iphone 4's in portrait but it also selects iphone 4's in landscape. Surely this should NOT select iPhone 4's in landscape?
From my understanding the first part selects screens less than 320px in width.
Second part same as second but with webkit vendor prefix
Third part selects screens on mobile devices less than 320px in width but with double pixel density (iPhone 4/4s in this case)
and fourth part is same as previous two but without double pixel density therefore should select iPhone 3gs and other mobiel devices which have 320px max width screens. I therefore, based on the above do not expect it to select landscape mode on any iPhone?
Any ideas how to add to it to solve that?
Neil
You should add orientation : landscape to your CSS, like this:
#media only screen
and (max-device-width : 320px)
and (orientation : landscape) {
/* Styles */
}