如何调整手机浏览器的宽高比

时间:2019-11-18 01:17:38

标签: html css browser aspect ppi

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

enter image description here

2 个答案:

答案 0 :(得分: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">

答案 1 :(得分:0)

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