html - 如何调整手机浏览器的纵横比

Question

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

Answer 1

1/检查CSS

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

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

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

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

2/检查您的视口(viewport)元标记

您还应该根据需要设置视口(viewport)元标记。这是一个常见的，通过示例显示在 stackoverflow 网站上:

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