CSS中的视口元标记

Posted 2023-03-06

【中文标题】CSS中的视口元标记

【英文标题】：Viewport meta tag in css

【发布时间】：2017-01-12 17:32:13

【问题描述】：

在 CSS 中的 viewport 元标记中，为了实现响应式网页设计，我们设置 width = device-width like <meta name="viewport" content="width=device-width"> 使页面的宽度等于设备的宽度，这样用户就不必滚动查看页面但是高度呢？浏览器是否根据宽度推断高度并使其成为设备高度？？？

【问题讨论】：

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

ok.. 所以即使高度等于设备高度？

高度会根据内容增加。

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

网页的高度与显示它的媒体无关。高度卷轴。很简单。

【参考方案1】：

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

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

width=device-width 部分设置页面的宽度以跟随设备的屏幕宽度。 initial-scale=1 部分设置浏览器首次加载页面时的初始缩放级别。您不需要设置特定的高度，因为window 尺寸总是在更改时按比例缩放。但以防万一，您可以更改 meta 标记的内容：

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

如果您有更多疑问，请查看here。

【讨论】：

我看了但仍然 initial-scale=1 不清楚，这是否意味着内容大小将与网页大小相同？所以就不需要放大/缩小了？

如果设置width等于device-width和initial-scale=1，则表示窗口与设备屏幕尺寸相同，比例为100%（即不需要放大/缩小）。如果您更改屏幕的尺寸，那么尺寸也会发生变化，因为宽度与设备尺寸绑定在一起，并且比例将始终保持不变。

【参考方案2】：

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

width 属性控制视口的大小。它可以设置为特定数量的像素，例如 width=600 或特殊值 device-width，它是以 CSS 像素为单位的屏幕宽度，比例为 100%。 （有相应的 height 和 device-height 值，这对于具有根据视口高度改变大小或位置的元素的页面可能很有用。）

阅读此https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag 然后希望清除所有内容。