对我的 iPhone XS 最大最小宽度感到困惑

Question

当我在 iPhone XS Max 上的 Safari 中查看网页时，以下 javascript 语句输出 纵向逻辑分辨率/像素：414x896 / 1242x2688不出所料。

<script>
document.write("Portrait logical resolution / pixels: " +screen.width + "x" + screen.height + " / ");
document.write(screen.width * window.devicePixelRatio + "x" + screen.height * window.devicePixelRatio + "<br>");
</script>

我在 CSS 中也有以下定义：

@media screen and (min-width:800px) {
    .minWidth:after{
        content: '800px';   
    }
}

@media screen and (min-width:900px) {
    .minWidth:after{
        content: '900px';   
    }
}

@media screen and (min-width:1000px) {
    .minWidth:after{
        content: '1000px';  
    }
}

我很惊讶地在页面上看到以下行 <span class="minWidth">Min Width: </span> 输出： 最小宽度：900px

这意味着设备的最小宽度 >= 900px 且 < 1000px。然而，这与设备的人像逻辑分辨率/像素 414x896 / 1242x2688

不一致

有什么解释吗？

Answer 1

将 viewport 元标记添加到我的网页解决了问题。

Apple 文档说明了 viewport 元标记 (https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html)：

“使用视口元标记改善您的网络内容在 iOS 上的呈现。通常，您使用视口元标记来设置视口的宽度和初始比例。例如，如果您的网页窄于 980 像素，那么您应该设置视口的宽度以适合您的网页内容。如果您正在设计 iPhone 或 iPod touch-specific 网络应用程序，则将宽度设置为设备。有关视口元标记的详细说明，请参阅支持的元标记。"

我在我的网页 header 中添加了以下行：

<meta name="viewport" content="width=device-width, initial-scale=1">

现在Javascript的screen.width与@media min-width的值一致。

在我的 iPhone XSmax 上我得到：

人像逻辑分辨率/像素：414x896 / 1242x2688

最小宽度：400

对我的 iPhone XS 最大最小宽度感到困惑

Confused about my iPhone XS Max min-width

css

media-queries

responsive-design