我在 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 但我不明白为什么。有人能帮我吗？ 谢谢
最佳答案
在移动浏览器上加载网页时，浏览器会假设该网站是为更大的屏幕设计的，并提供比设备更大的视口(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
关于android - chrome android设置宽度为100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16634319/