视口（Viewport）是浏览器渲染网页的可视区域，其设置直接影响网页在移动设备上的显示效果。未设置视口时，移动设备会默认使用980px的"布局视口"，导致网页内容被压缩或横向滚动；而正确配置视口标签可让浏览器根据设备屏幕尺寸动态调整布局。

案例5-1：视口设置对比
未设置视口时，手机浏览器会将网页缩放到980px宽度显示，文字极小且布局错乱；设置视口后，网页宽度与设备屏幕宽度一致，内容比例正常。核心代码如下：

<!-- 正确的视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

参数说明：

• width=device-width：使布局视口宽度等于设备屏幕宽度
• initial-scale=1.0：初始缩放比例为1（无缩放）
• 可选参数：maximum-scale=1.0（禁止放大）、user-scalable=no（禁止用户缩放）