chrome android设置宽度为100%

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