CSS中的视口元标记

Question

在CSS中实现响应式网页设计的viewport元标记中，我们设置width=device-width（如<meta name="viewport" content="width=device-width">），使得页面宽度等于设备宽度，以便用户不必滚动即可查看页面。但是关于高度呢？浏览器是否会根据宽度推断高度并将其设置为设备高度呢？

- titlu

---

更改 content="width=device-width, initial-scale=1"，高度与宽度绑定。 - d_z90

好的，那么高度也将等于设备高度吗？ - titlu

高度将根据内容增加。 - Abhishek Pandey

是的，因为通过 initial-scale=1，您将初始缩放级别设置为100％，如果宽度发生变化，则高度也会发生变化。 - d_z90

只是另一个疑问：initial-scale=1 是不是意味着内容大小将与网页大小相同？因此，不需要缩放吗？ - titlu

网页的高度与其显示媒介无关，可以滚动。简单明了。 - Martin

Answer 1

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

width属性控制视口的大小。它可以设置为一个特定数量的像素，如width=600，也可以设置为设备宽度（device-width）这个特殊值，该值是在CSS像素下缩放100％时屏幕的宽度。（还有对应的高度和设备高度值，适用于基于视口高度更改大小或位置的元素的页面。）

阅读此https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag，希望能清楚地解释一切。

- Bipon Biswas

Answer 2

响应式网站的正确标签如下：

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

width=device-width这部分设置页面的宽度跟随设备的屏幕宽度。而initial-scale=1这部分则在页面被浏览器首次加载时设置初始缩放级别。由于窗口尺寸在变化时总是两个维度同时缩放，所以您不需要设置特定的高度。但如果需要，您可以通过更改meta标签的内容来实现。

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

如果您还有疑问，请点击这里查看更多信息。

- d_z90

---

我查看了，但是initial-scale=1对我来说仍然不清楚，它是否意味着内容大小将与网页大小相同？因此不需要缩放？ - titlu

如果将width设置为device-width并且initial-scale=1，这意味着窗口与设备屏幕具有相同的尺寸，并且缩放比例为100%（这意味着不需要缩放）。如果更改屏幕尺寸，则大小也会随之更改，因为宽度与设备尺寸绑定，而缩放比例始终保持不变。 - d_z90