Question

我必须遗漏一些显而易见的东西，但它来了......我只是想在我的浏览器上建立一个狭窄的视口宽度（320px）来检查/设计手机显示屏的网页布局。为什么如果使用元标记设置视口宽度，浏览器不尊重它？这就是我的工作：

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=320px" />
<style>

 .content {
    width: 100vw;
    background-color: yellow;
}

</style>
</head>

<body>
<div class="content">
    <p> Hello, this is the 'content' </p>
</div>
</body>

</html>

我放入标签的大小并不重要，它似乎只是使用原生显示尺寸。谁能告诉我问题是什么以及如何实际做到这一点？

Answer 1

您不需要设置视口来检查移动兼容性。只需点击浏览器中的F + 12键 chrome ，然后点击移动设备图标即可。这样，您可以选择任何视口配置文件并检查您的设计。见下图：

视口大小不起作用

1 个答案: