iPhone XR / XS / XS Max CSS 媒体查询

Posted 2023-03-06

【中文标题】iPhone XR / XS / XS Max CSS 媒体查询

【英文标题】：iPhone XR / XS / XS Max CSS media queries

【发布时间】：2019-02-18 15:09:49

【问题描述】：

用于定位 Apple 2018 年设备的正确 CSS 媒体查询有哪些：iPhone XR/XS/XS Max？

【参考方案1】：

iPhone XR

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2)  

---

iPhone XS

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)  

---

iPhone XS Max

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3)  

---

寻找特定的方向？

肖像

添加以下规则：

    and (orientation : portrait) 

风景

添加以下规则：

    and (orientation : landscape) 

参考资料：

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/ https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

【讨论】：

其他安卓设备也受到上述风格的影响

许多年前，我创建了一个 sn-p，我在 Gist/Github† 上分享了如何使用这种技术和 SCSS 来定位这些设备。我现在正在学习这种device-width 技术已被弃用。你们现在都用什么代替？ †gist.github.com/frankstallone/cee114d0b6935717696e6506552bc75a

我希望所有 SO 的答案都是直截了当的，谢谢！

我不知道当前最新的浏览器，但当媒体查询开始时，(max/min)-device-width 表示设备的实际分辨率，(max/min)-width 表示 CSS 像素。因此，如果屏幕分辨率宽度为 720 像素且屏幕像素密度为 2，则 CSS 像素为 360（一半）。 device-width 现在也被弃用了developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width

【参考方案2】：

以上是正确的，但设计师需要以真实的屏幕尺寸为目标，以避免缩放、裁剪等。例如默认横向屏幕尺寸实际上是 808 像素的 XR。

所以这可能更合适：@media (max-width: 808px) ...

这实际上会覆盖这个查询：@media (max-width: 896px) ...

问题是苹果的安全区域插图。通过添加以下内容可以克服这些问题并获得真正的 896px 边到边宽度；

元标记：viewport-fit=cover

CSS：body padding: env(safe-area-inset, 0px);

可以更改 0px 大小的填充，或添加左右上下变量，或适应纵向/横向。但大多数人的设计中已经有足够的填充。

参考：https://webkit.org/blog/7929/designing-websites-for-iphone-x/

未在其他设备上进行测试，但似乎它们都采用相同的方法。

【参考方案3】：

来自 Nathan 的信息很棒。感谢每个浏览器的检查器似乎没有的断点。我遇到的唯一挑战是我之前的所有媒体查询都使用了类似

/* Landscape */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape)  

而上面的解决方案只使用

and (device-width : 414px)

这可能会导致您可能已经使用最小设备和最大设备的查询出现问题。

非常感谢这些尺寸和 DPR！

【讨论】：

@DickKirkland 提供的答案是正确的，因为您必须将min 和max 添加到device-width 和device-height 中

我不知道当前最新的浏览器，但当媒体查询开始时，(max/min)-device-width 表示设备的实际分辨率，(max/min)-width 表示 CSS 像素。因此，如果屏幕分辨率宽度为 720 像素且屏幕像素密度为 2，则 CSS 像素为 360（一半）。使用最大/最小宽度比考虑所有像素密度要容易得多。设备宽度现在也被弃用了developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width