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 回答