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

iPhone X / 8 / 8 Plus CSS media queries

提问by nathan

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

苹果新设备对应的 CSS 媒体查询有哪些？我需要设置body'sbackground-color以更改 X 的安全区域背景颜色。

回答by nathan

iPhone X

iPhone X

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

---

---

iPhone 8

iPhone 8

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

---

---

iPhone 8 Plus

iPhone 8 加

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

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

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

---

---

Looking for a specific orientation ?

寻找特定的方向？

Portrait

肖像

Add the following rule:

添加以下规则：

    and (orientation : portrait) 

Landscape

风景

Add the following rule:

添加以下规则：

    and (orientation : landscape) 

References:

参考：

• 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/

回答by Yash Vekaria

Here are some of the following media queries for iphones. Here is the ref link https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

以下是一些针对 iphone 的媒体查询。这是参考链接https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

        /* iphone 3 */
        @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

        /* iphone 4 */
        @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

        /* iphone 5 */
        @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

        /* iphone 6, 6s, 7, 8 */
        @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

        /* iphone 6+, 6s+, 7+, 8+ */
        @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

        /* iphone X , XS, 11 Pro */
        @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

        /* iphone XR, 11 */
        @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }

       /* iphone XS Max, 11 Pro Max */
        @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }

回答by Sam Sedighian

I noticed that the answers here are using: device-width, device-height, min-device-width, min-device-height, max-device-width, max-device-height.

我注意到这里的答案正在使用：device-width, device-height, min-device-width, min-device-height, max-device-width, max-device-height。

Please refrain from using them since they are deprecated. see MDN for reference. Instead use the regular min-width, max-widthand so on. For extra assurance, you can set the min and max to the same px amount. For example:

请不要使用它们，因为它们已被弃用。请参阅MDN 以供参考。而是使用常规的min-width，max-width依此类推。为了额外保证，您可以将最小值和最大值设置为相同的 px 量。例如：

iPhone X

iPhone X

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

You may also notice that I am using 635px for height. Try it yourself the window height is actually 635px. run iOS simulator for iPhone X and in Safari Web inspector do window.innerHeight. Here are a few useful links on this subject:

您可能还注意到我使用 635px 作为高度。自己尝试一下，窗口高度实际上是 635px。在 iPhone X 和 Safari Web 检查器中运行 iOS 模拟器window.innerHeight。以下是有关此主题的一些有用链接：

• https://medium.com/@hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://ivomynttinen.com/blog/ios-design-guidelines
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

• https://medium.com/@hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://ivomynttinen.com/blog/ios-design-guidelines
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

回答by wasif.io

It seems that the most accurate (and seamless) method of adding the padding for iPhone X/8 using env()...

似乎是使用 env() 为 iPhone X/8 添加填充的最准确（和无缝）方法......

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Here's a link describing this:

这是一个描述这一点的链接：

https://css-tricks.com/the-notch-and-css/

https://css-tricks.com/the-not-and-css/

回答by cnst

If your page is missing meta[@name="viewport"]element within its DOM, then the following could be used to detect a mobile device:

如果您的页面meta[@name="viewport"]在其 DOM 中缺少元素，则可以使用以下内容来检测移动设备：

@media only screen and (width: 980px), (hover: none) { … }

If you want to avoid false-positives with desktops that just magically have their viewport set to 980px like all the mobile browsers do, then a device-widthtest could also be added into the mix:

如果您想避免像所有移动浏览器一样神奇地将视口设置为 980px 的台式机的误报，那么device-width还可以添加一个测试：

@media only screen and (max-device-width: 800px) and (width: 980px), (hover: none) { … }

Per the list at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries, the new hoverproperty would appear to be the final new way to detect that you've got yourself a mobile device that doesn't really do proper hover; it's only been introduced in 2018 with Firefox 64 (2018), although it's been supported since 2016 with Android Chrome 50 (2016), or even since 2014 with Chrome 38 (2014):

根据https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 上的列表，新hover属性似乎是检测您是否拥有移动设备的最后一种新方法这真的不合适hover；它仅在 2018 年随 Firefox 64 (2018) 推出，尽管自 2016 年起由 Android Chrome 50 (2016) 或什至自 2014 年起由 Chrome 38 (2014) 支持：

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover