4

我在使用 chrome 浏览器的 android 上的 css 有问题

我在 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，但我不明白为什么。有人能帮我吗？谢谢

4

3 回答 3

10

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

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

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

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

于 2013-06-24T10:26:35.983 回答
0

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

你有什么理由在 html 和 body 上使用 position，而不是 header？

于 2015-04-03T13:31:05.590 回答
0

首先，如果你设置 max-width: 100% 然后设置 width: 100% 意味着宽度会覆盖 max-width，所以你可以去掉 max-width。除了将最小值/最大值设置为与宽度相同的意义何在？

其次，如果您将主体宽度设置为 100%，那么主体将采用视口的最大宽度。所以问题是视口大小是多少？

于 2013-05-19T11:52:56.977 回答