How Can I Target the iPhone 5's Unique Aspect Ratio in My Media Queries?

iPhone 5 media query conundrum

For the iPhone 5, the regular max-device-width query is insufficient. As the iPhone 5 boasts a longer screen, it skips the mobile view altogether.

To adapt, consider incorporating device aspect ratio into your media query. Interestingly, the iPhone 5's aspect ratio is not 16:9 but rather 40:71.

@media screen and (device-aspect-ratio: 40/71) {}

This way, you can target the iPhone 5 specifically while keeping other iPhone models in mind:

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

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) {}

By using device-aspect-ratio in your media queries, you can ensure that your website adapts gracefully to different iPhone models, including the wider iPhone 5 and its unique aspect ratio.

The above is the detailed content of How Can I Target the iPhone 5's Unique Aspect Ratio in My Media Queries?. For more information, please follow other related articles on the PHP Chinese website!