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

Question

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

<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和<1000像素。然而，这不符合设备的纵向逻辑分辨率/像素414x896/1242x22688

对此有什么解释吗？

Answer 1

在我的网页中添加viewport元标记解决了这个问题。

苹果文档介绍了viewport元标签(https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html)：

"使用视口元标记可以改进iOS上web内容的显示。通常，使用视口元标记来设置视口的宽度和初始比例。例如，如果你的网页窄于980像素，那么你应该设置视口的宽度以适应你的网页内容。如果您正在设计iPhone或iPod touch特定的web应用程序，请将宽度设置为设备的宽度。有关视口元标记的详细描述，请参阅支持的元标记">

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

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

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

在我的iPhone XSmax我得到：

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

最小宽度：400