视口大小不起作用答案

【问题标题】：Viewport size not working视口大小不起作用
【发布时间】：2018-05-02 03:16:58
【问题描述】：

我一定遗漏了一些明显的东西，但它来了......我只想在我的浏览器上建立一个窄视口宽度（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>

我在标签中放置的尺寸无关紧要，它似乎只是使用本机显示尺寸。谁能告诉我问题是什么以及如何解决？

【问题讨论】：

您必须使用带有 viewport 标签的 css 媒体查询，以便浏览器识别在浏览器调整大小时要执行的操作。它最初不会在浏览器加载时加载移动视图。它仅在浏览器缩小时响应
@Godis 为此，您应该大胆地使用媒体查询或浏览器响应模式。如果没有，那就去学习一些编码原则。

标签： css size width viewport

【解决方案1】：

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

【讨论】：

非常感谢，Pablo，我不知道这个！