在移动端网页开发中,viewport meta 标记是优化显示效果的关键。它定义了浏览器可视区域的宽度和缩放比例,常用于适配不同设备屏幕。
默认情况下,移动浏览器会将网页放入一个虚拟的 viewport(如 980px),然后缩放到设备屏幕(如 375px),导致内容显得很小。例如,一个宽度为 460px 的图片,在未设置 viewport 时会被压缩到约 176px,不占满屏幕。
通过添加 ,viewport 宽度变为设备宽度(如 375px),初始缩放为 1。此时,若图片宽度固定为 460px,会超出屏幕;但结合 CSS(如 width: 100%),图片即可适配设备宽度,占满屏幕。
简而言之,viewport meta 标记通过控制 viewport 大小,确保网页布局与设备屏幕匹配,是响应式设计的基础。