0

我正在 Chrome 桌面上测试网页，调整为模拟移动显示，但我不知道如何调整纵横比。宽度似乎反映了 946px 宽度和 1743px 高度，而它应该小得多，反映了移动屏幕的尺寸。当我在我的实际移动设备上访问该页面时，会出现同样的问题。我如何调整或调整正在发生的事情，以便我的页面在移动设备上是正常大小？谢谢

在此处输入图像描述

4

2 回答 2

2

1/ 检查 CSS

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

但是，这里的问题是您在检查器中选择了一个带有 #main 标识符的部门。这个分割比屏幕尺寸大可能是因为 CSS 规则。这应该通过使用如下规则来解决：

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

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

2/ 检查您的视口元标记

您还应该根据需要设置视口元标记。这是一个常见的例子，在stackoverflow网站上举例：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
于 2019-11-18T01:31:09.053 回答
0

在选项中，您选择了 iphone 6/7/8，因此您不能低于该视口，要选择移动视图，您必须将选项从 iphone 6/7/8 更改为响应式，或者您可以选择不同的移动视图选项。

于 2019-11-18T04:14:58.067 回答