I keep trying and trying, but my media queries are not working for iPhones.
@media only screen and (max-device-width: 667px) {}
It's supposed to support all the iPhones, up to the 6 Plus. Can someone help?
Asked
Active
Viewed 81 times
-2
-
http://stackoverflow.com/questions/25759046/iphone-6-and-6-plus-media-queries and check http://stackoverflow.com/questions/12539697/iphone-5-css-media-query/24910407#24910407 – Sudheer Nov 03 '14 at 08:45
1 Answers
2
In terms of targeting just certain versions of the iPhone / iPhone 6, this post provides a helpful response: iPhone 6 and 6 Plus Media Queries
To support all small devices, under the 667px mark, you can generalize your media query to:
@media only screen and (max-width: 667px) {
...
}
If you are testing this on your desktop, just with a small window size, the reason the max-device-width may have not been working for you is:
width versus device-width
In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device.
Source: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
