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

Question

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

cssiphonemedia-queries

39

如何正确使用CSS媒体查询来针对苹果2018年的设备：iPhone XR/XS/XS Max?

- nathan

3个回答

4

以上内容是正确的，但设计师需要针对真实的屏幕尺寸进行设计，以避免缩放、裁剪等问题。例如，在 XR 上，默认的横向屏幕尺寸实际上是 808 像素。

因此，以下可能更为合适：@media (max-width: 808px) {... 这实际上会覆盖此查询：@media (max-width: 896px) {... 问题在于苹果的安全区域插图。可以通过添加以下内容来解决这些问题，并获得真正的 896 像素宽度：

元标记：viewport-fit=cover CSS：body { padding: env(safe-area-inset, 0px); } 0 像素大小的填充可以更改，也可以添加左右上下变量，或者适应纵向/横向。但大多数人的设计中已经有足够的填充了。

参考：https://webkit.org/blog/7929/designing-websites-for-iphone-x/ 未在其他设备上测试，但似乎它们都采用了相同的方法。

- darren

0

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)

这可能会导致查询出现问题，因为您可能已经使用了min-device和max-device。

非常感谢这些尺寸和DPR！

- Dick Kirkland

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

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nathan · Accepted Answer

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)

参考资料: