iPhone X/8/8 Plus CSS媒体查询 [英] iPhone X / 8 / 8 Plus CSS media queries

问题描述

与Apple的新设备相对应的CSS媒体查询是什么?我需要设置body的background-color来更改X的安全区域背景颜色.

What are the CSS media queries corresponding to Apple's new devices ? I need to set the body's background-color to change the X's safe area background color.

推荐答案

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也具有相同的尺寸.

iPhone 6+/6s+/7+/8+ share the same sizes, while the iPhone 7/8 also do.

正在寻找特定的方向吗?

Looking for a specific orientation ?

肖像

添加以下规则:

    and (orientation : portrait) 

风景

添加以下规则:

    and (orientation : landscape) 

参考文献:

• https://webkit.org/blog/7929/designing -websites-for-iphone-x/
• https://developer.apple .com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
• https://developer.apple.com/ios /human-interface-guidelines/overview/iphone-x/
• https://mydevice.io/devices/
• http://viewportsizes.com/mine/

• https://webkit.org/blog/7929/designing-websites-for-iphone-x/
• https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
• https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
• https://mydevice.io/devices/
• http://viewportsizes.com/mine/

这篇关于iPhone X/8/8 Plus CSS媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！