调整媒体查询以处理iPhone 5

Question

I have a web page that displays properly for an iphone 6. Is there an easy way to adjust the screen size with a media query for an iphone 5 so everything will shrink down properly?

I know how to trigger CSS for an Iphone 5 what I'm looking for is a way to easily set up CSS so it's just one CSS command to reformat for the iphone 5. Let's say you have it all working for an Iphone 6, could we just set a reduced width for Iphone 5 and have everything automatically scale down?

Answer 1

Only iPhone 5 (portrait mode)

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
   ...
}

Only iPhone 5 (landscape mode)

@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
{
   ...
}

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: 40/71) {}