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

Question

用于定位Apple 2018设备的正确CSS媒体查询是什么:iPhone XR/XS/XS Max？

Answer 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

Answer 2

以上是正确的，但设计者需要针对真实的屏幕尺寸来避免缩放、裁剪等。例如，XR 的默认横向屏幕尺寸实际上是 808px。

所以这可能更合适： @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/

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