如何对iPhone X/8/8 Plus CSS媒体查询?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1441)

与苹果新设备对应的CSS媒体查询是什么?我需要设置bodybackground-color以更改X的安全区背景色。

提问于
用户回答回答于

iPhoneX

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone 8

@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }

iPhone 8 Plus

@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone 6+/6s+/7+/8+拥有相同的尺寸,而iPhone 7/8也是如此。


肖像画

增加以下规则:

    and (orientation : portrait) 

景物

增加以下规则:

    and (orientation : landscape) 

参考资料:

用户回答回答于

扫码关注云+社区

领取腾讯云代金券