iPhone X / 8/8 Plus CSS媒体查询

  • Z时代
  • 2024-01-10
  • 分类：问答

苹果新设备对应的CSS媒体查询是什么？我需要设置body的background-color改变X的安全区域的背景颜色。

回答：

iPhone X

@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)

以上是 iPhone X / 8/8 Plus CSS媒体查询 的全部内容， 来源链接： utcz.com/qa/408171.html

回到顶部