Viewport元标签用于控制移动端页面的显示和缩放，标准写法为<meta name="viewport" content="width=device-width, initial-scale=1.0">，可使页面宽度匹配设备屏幕、初始缩放为1；常用属性包括width、initial-scale、maximum-scale、user-scalable等，合理设置能确保内容适配移动设备；需注意避免完全禁用用户缩放，以免影响可访问性；实际开发中还需结合相对单位、响应式布局（如Flexbox）、媒体查询等技术实现完整适配，确保良好移动端体验。
在移动端浏览网页时，页面的显示效果与桌面端有很大不同。为了让HTML页面在手机屏幕上正确缩放和布局，必须合理设置viewport元标签。这是实现响应式设计的第一步。
什么是Viewport元标签
Viewport是指用户可视的网页区域。在移动设备上，浏览器会默认将页面渲染成一个较宽的视口（通常约980px），然后将其缩小以适应屏幕宽度，导致页面看起来很小、文字挤在一起。通过设置viewport元标签，可以控制页面的宽度、初始缩放比例等，使内容适配移动屏幕。
标准的viewport元标签写法如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这条代码告诉浏览器：页面的宽度应等于设备的屏幕宽度，初始缩放比例为1:1，不进行额外缩放。
立即学习“前端免费学习笔记（深入）”；
常用Viewport属性说明
content属性中可以包含多个参数，常用的有：
- width=device-width：设置视口宽度为设备的屏幕宽度（如375px、414px等）
- initial-scale=1.0：页面初始缩放比例为1，即不缩放
- user-scalable=no：禁止用户手动缩放（不推荐完全禁用，影响可访问性）
- maximum-scale=1.0：最大缩放比例为1
- minimum-scale=1.0：最小缩放比例为1
完整示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意：完全禁止缩放可能对视力障碍用户不友好，建议谨慎使用。
实际开发中的注意事项
只添加viewport标签还不够，还需配合CSS一起使用才能实现良好适配。
- 使用相对单位（如rem、em、%）代替固定像素值
- 采用响应式布局（Flexbox或Grid）
- 配合媒体查询（@media）针对不同屏幕尺寸调整样式
- 避免使用过宽的固定宽度元素，防止横向滚动
例如，配合viewport使用rem布局时，可通过JS动态设置根字体大小，实现等比缩放。
总结
设置viewport是移动端HTML适配的基础。加上width=device-width和initial-scale=1.0这两个关键属性，能确保页面在移动设备上正确渲染。再结合响应式CSS，就能构建出良好的移动端体验。
基本上就这些，不复杂但容易忽略。记得每个移动端页面都加上viewport标签。
