Question

我在使用Chrome浏览器的android上遇到了问题

我在css中做的是：

html{
max-width: 100%;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}

body{
background-color: rgba(101,122,151,0.8);
margin: 0px;
width: 100%;
overflow: hidden;
position: relative;
}

header {
width: 100%;
min-width: 100%;
color: yellow;
font-size: 40px;
text-align: left;
}

并在javascript中我打印了正文和标题的宽度

alert($('header').width());
alert($('body').width());

它显示我的身体宽度是980，标题宽度是340 但我不明白为什么。有人能帮我吗？感谢

Answer 1

在移动浏览器上加载网页时，浏览器会假设该网站设计用于更大的屏幕，并提供比设备更大的视口，以便用户可以放大内容。

如果你想要设备的宽度，你需要设置视口大小，可以用：

<meta name="viewport" content="width=device-width, initial-scale=1">

此处有更多信息：http://docs.webplatform.org/wiki/tutorials/mobile_viewport

Answer 2

首先，如果设置max-width：100％然后设置width：100％表示宽度将覆盖max-width，因此您可以删除max-width。除了将min / max设置为与宽度相同时，还有什么意义呢？

其次，如果您将体宽设置为100％，则body将获取视口的最大宽度。所以问题是视口大小是什么？

Answer 3

您是否尝试在身体上设置最小宽度为100％？

你有什么理由在html和body上使用位置，而不是标题？

chrome android设置宽度为100％

3 个答案: