对我的iPhone XS最大最小宽度感到困惑
当我在我的iPhone XS上查看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>输出如下：Min宽度:900 am
这意味着设备的最小宽度>= 900‘s和<1000’s.然而，这不符合设备的肖像逻辑分辨率/像素为414x896 / 1242x2688
对此有什么解释吗？
Stack Overflow用户
发布于 2021-06-07 17:26:54
将viewport元标记添加到我的网页解决了这个问题。
苹果文档中提到了viewport元标签(https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html)：
“使用viewport标记可以改进iOS上web内容的显示。通常，使用viewport元标记来设置视图端口的宽度和初始比例尺。例如，如果您的网页小于980像素，则应该设置视图端口的宽度以适应您的web内容。如果您正在设计特定于iPhone或iPod触摸的web应用程序，那么请将宽度设置为设备的宽度。有关支持的meta标记，请参阅支持的meta标记，以获得对该视图端口元标记的详细描述。”
我在网页的标题中添加了以下一行：
<meta name="viewport" content="width=device-width, initial-scale=1">
现在Javascript的screen.width与@media min-width值一致。
在我的iPhone XSmax上：
纵向逻辑分辨率/像素: 414x896 / 1242x2688
最小宽度: 400
https://stackoverflow.com/questions/67858855
复制相似问题
腾讯云开发者
