viewport在html

在HTML中，viewport是通过标签设置的移动端适配核心属性，用于控制网页在不同设备上的显示比例和布局。以下是关键要点：

基本语法‌
html
Copy Code

width=device-width：使视口宽度等于设备屏幕宽度
initial-scale=1.0：设置初始缩放比例为1:1

核心属性‌

属性	作用	示例值
width	视口宽度	device-width/具体像素值
height	视口高度	device-height（较少使用）
initial-scale	初始缩放比例	1.0（不缩放）
minimum-scale	最小缩放比例	0.5
maximum-scale	最大缩放比例	2.0
user-scalable	是否允许缩放	yes/no（不推荐禁用）

设计原理‌

移动端浏览器默认布局视口(layout viewport)为980px，会压缩PC页面显示
通过设置width=device-width可将布局视口与理想视口(ideal viewport)对齐
CSS像素与设备像素通过devicePixelRatio动态换算
响应式实践‌
必须放在HTML的中优先解析
推荐组合使用：width=device-width + initial-scale=1
避免禁用缩放功能（user-scalable=no）以保证无障碍访问