android - chrome android设置宽度为100%

Question

我在 android 上使用 chrome 浏览器时遇到了 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但我不明白为什么。有人能帮我吗？谢谢

Answer 1

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

如果你想要设备的宽度，你需要设置视口(viewport)大小，这可以通过以下方式完成:

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

这里有更多信息:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics