如何为移动浏览器调整宽高比

Question

我正在Chrome台式机上测试一个网页，并对其进行了调整以模拟移动显示，但是我不知道如何调整纵横比。宽度似乎应该是946px宽度和1743px高度，但是应该更小一些，以反映移动屏幕的尺寸。当我在实际的移动设备上访问该页面时，也会发生相同的问题。如何调整或调整正在发生的事情，以使页面在移动设备上保持正常大小？谢谢

Answer 1

您选择了Iphone 6/7/8格式。如果您在检查器中选择或标记，并且您的页面不包含更改此标记的默认宽度和高度的CSS，则您会看到标记的宽度为375px，就像您选择的移动框架一样。

但是，这里的问题是您在检查器中选择了一个带有#main标识符的部门。由于CSS规则，此划分大于屏幕尺寸。应该使用以下规则来解决此问题：

#main {
  min-width: 100%;
  width: 100%;
}

[查看媒体查询如何使您的页面内容响应：https://developer.mozilla.org/fr/docs/Web/CSS/@media

您还应根据自己的需要设置元标记，例如在stackoverflow网站上示例：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

Answer 2

在选项中，您选择了iphone 6/7/8，因此您不能再降低该视口，要选择移动视图，必须将选项从iphone 6/7/8更改为自适应，或者选择其他移动视图选项。