请解释 Viewport 的概念，并说明在 HTML 中如何配置 viewport meta 标签？
考察说明
考查对 Viewport 概念及其在移动端适配中配置方法的理解。
回答思路
- 【回答框架 1】Viewport 是浏览器中用于显示网页内容的可视区域，在 CSS 中有布局视口、视觉视口和理想视口之分。移动端默认布局视口宽度通常大于屏幕宽度，导致页面缩放，因此需要通过 viewport meta 标签进行控制。
- 【回答框架 2】viewport meta 标签通过在 HTML 的 head 中设置 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 来实现。常用属性包括 width（布局视口宽度，可设为 device-width）、initial-scale（初始缩放比例）、maximum-scale 和 minimum-scale（缩放上下限）、user-scalable（是否允许用户缩放）。
- 【回答框架 3】配置时通常使用 width=device-width 使布局视口宽度等于设备屏幕宽度，并设置 initial-scale=1.0 避免初始缩放，从而让页面在移动端以适配的尺寸显示。还需注意部分属性可能影响无障碍性或用户体验，如禁止缩放需谨慎使用。
- 【关键点 1】Viewport 是可视区域，移动端需通过 meta 标签控制布局视口宽度。
- 【关键点 2】常见配置为 width=device-width 和 initial-scale=1.0。
- 【关键点 3】配置不当可能导致页面缩放或显示错位。
- 【易错点 1】将 user-scalable=no 常用于无障碍场景，可能被视作可用性问题。
- 【易错点 2】仅依赖 meta 标签，未结合响应式设计，可能无法完全适配所有设备。