Chrome Android设置宽度为100%。

Question

我在安卓上使用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 中，我输出了 body 和 header 的宽度。

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

它显示我的页面宽度为980，头部宽度为340，但我不明白为什么。有人可以帮忙吗？谢谢。

- fsulser

---

一个屏幕截图或复制链接会很好。 - Kinlan

Answer 1

在移动浏览器加载网页时，浏览器会默认认为该网站是为较大屏幕设计的，并给出比设备更大的视口，以便用户可以缩放内容。

如果您想要设备的宽度，您需要设置视口大小，可以通过以下方式实现：

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

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

- Matt Gaunt

---

链接已损坏。 - cahen

已更新至 MDN，这应该是一个更可靠的信息来源。 - Matt Gaunt

Answer 2

你尝试过在body上设置min-width为100%吗？

你为什么只在html和body上使用position，而不在header上使用呢？

- Scharphorn

Answer 3

首先，如果您设置 max-width: 100%，然后再设置 width: 100%，意味着 width 会覆盖 max-width，所以可以移除 max-width。此外，将 min 和 max 设置为与 width 相同的值有什么意义呢？

其次，如果您将 body 的宽度设置为 100%，那么 body 将占据视口的最大宽度。所以问题是，视口的尺寸是多少？

- sylwia

---

我设置了min-width，因为我认为使用它而不是width会起作用，但它并没有。 我认为视口具有浏览器窗口的完整大小，因为body的宽度为980px，这是浏览器窗口的完整宽度。 body的背景颜色覆盖整个屏幕，因此body的宽度为100％。 - fsulser

尝试为body和header设置margin: 0和border: none。 - sylwia

我改变了它们，但没有帮助。 - fsulser