The iPhone 5 has a longer screen and it's not catching my website's mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries?
My current media query is this:
@media only screen and (max-device-width: 480px) {}
Another useful media feature is device-aspect-ratio.
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone < 5:@media screen and (device-aspect-ratio: 2/3) {}
iPhone 5:@media screen and (device-aspect-ratio: 40/71) {}
iPhone 6:@media screen and (device-aspect-ratio: 375/667) {}
iPhone 6 Plus:@media screen and (device-aspect-ratio: 16/9) {}
iPad:@media screen and (device-aspect-ratio: 3/4) {}
Reference:
Media Queries @ W3C
iPhone Model Comparison
Aspect Ratio Calculator
There is this, which I credit to this blog:
@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 only */
}
Keep in mind it reacts the iPhone 5, not to the particular iOS version installed on said device.
To merge with your existing version, you should be able to comma-delimit them:
@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone only */
}
NB: I haven't tested the above code, but I've tested comma-delimited @media queries before, and they work just fine.
Note that the above may hit some other devices which share similar ratios, such as the Galaxy Nexus. Here is an additional method which will target only devices which have one dimension of 640px (560px due to some weird display-pixel anomalies) and one of between 960px (iPhone <5) and 1136px (iPhone 5).
@media
only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
/* iPhone only */
}
All these answers listed above, that use max-device-width or max-device-height for media queries, suffer from very strong bug: they also target a lot of other popular mobile devices (probably unwanted and never tested, or that will hit the market in future).
This queries will work for any device that has a smaller screen, and probably your design will be broken.
Combined with similar device-specific media queries (for HTC, Samsung, IPod, Nexus...) this practice will launch a time-bomb. For debigging, this idea can make your CSS an uncontrolled spagetti. You can never test all possible devices.
Please be aware that the only media query always targeting IPhone5 and nothing else, is:
/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
/*IPhone 5 only CSS here*/
}
Note that exact width and height, not max-width is checked here.
Now, what is the solution? If you want to write a webpage that will look good on all possible devices, the best practice is to you use degradation
/* degradation pattern we are checking screen width only sure, this will change is turning from portrait to landscape*/
/*css for desktops here*/
@media (max-device-width: 1024px) {
/*IPad portrait AND netbooks, AND anything with smaller screen*/
/*make the design flexible if possible */
/*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
/*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
/*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
/*IPhone portrait and smaller. You can probably stop on 320px*/
}
If more than 30% of your website visitors come from mobile, turn this scheme upside-down, providing mobile-first approach. Use min-device-width in that case. This will speed up webpage rendering for mobile browsers.
iPhone 5 in portrait & landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* styles*/
}
iPhone 5 in landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* styles*/
}
iPhone 5 in portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* styles*/
}
None of the response works for me targeting a phonegapp App.
As the following link points, the solution below works.
@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
// css here
}
You can get your answer fairly easily for the iPhone5 along with other smartphones on the media feature database for mobile devices:
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
You can even get your own device values on the test page on the same website.
(Disclaimer: This is my website)
/* iPad */
@media screen and (min-device-width: 768px) {
/* ipad-portrait */
@media screen and (max-width: 896px) {
.logo{
display: none !important;
}
}
/* ipad-landscape */
@media screen and (min-width: 897px) {
}
}
/* iPhone */
@media screen and (max-device-width: 480px) {
/* iphone-portrait */
@media screen and (max-width: 400px) {
}
/* iphone-landscape */
@media screen and (min-width: 401px) {
}
}
