HTML viewport 视口深入
HTML viewport深入：meta viewport宽度width=device-width/初始缩放initial-scale/最大缩放maximum-scale/最小缩放minimum-scale/用户缩放user-scalable、视觉视口vs布局视口vs理想视口 · 难度：入门 · +10XP
HTML viewport —— 移动端适配的第一行代码
在手机上看网页时，为什么有的网页字特别小需要双指放大？因为没有设置viewport。这一行代码是所有响应式网页的起点。
标准viewport设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">告诉手机浏览器：用设备的实际宽度显示网页，初始缩放比例为1。
完整属性说明
| 属性 | 作用 | 推荐值 |
|---|---|---|
| width | 视口宽度 | device-width |
| initial-scale | 初始缩放 | 1.0 |
| maximum-scale | 最大缩放 | 不设（让用户自由缩放） |
| user-scalable | 允许缩放 | yes |
有vs没有viewport
没有viewport：手机把网页按980px渲染再缩小到屏幕，字像蚂蚁一样小。
有viewport：网页按手机实际宽度（如375px）渲染，字大小正常。
动手练习
- 基础练习：做一个网页，分别测试有和无viewport在手机上的效果。
- 进阶应用：用CSS Media Query配合viewport做响应式布局——手机单列、平板两列、电脑三列。
- 项目实战：找个没做移动适配的网页，加上viewport和响应式CSS。