第2章：视口设置与meta标签
大家好，我是你们的老朋友。今天咱们聊聊移动端适配里最基础、也最容易踩坑的一个东西——viewport meta标签。
说实话，我刚入行那会儿，对这个标签的理解就是「抄就完事了」。直到有一次，一个客户拿着手机说「你这页面怎么字这么小？」，我才意识到——嗯，这东西真不能随便糊弄。
2.1 什么是视口（Viewport）？
先问大家一个问题：你手机浏览器打开一个PC网页，会发生什么？
浏览器会假装自己是个大屏幕，比如980px宽。然后它把整个页面缩小，塞进手机屏幕里。结果呢？字小得跟蚂蚁一样，你得双指放大才能看清。
这个「假装出来的宽度」，就是浏览器的默认视口。不同浏览器不一样：
| 浏览器 | 默认视口宽度 |
|---|---|
| iPhone Safari | 980px |
| Android Chrome | 980px |
| BlackBerry | 1024px |
说白了，浏览器在「骗自己」。它以为屏幕很宽，结果实际物理像素就那么点。这就是为什么我们需要viewport meta标签——告诉浏览器：别装了，按真实尺寸来。
2.2 viewport meta标签详解
这个标签长这样：
<meta name="viewport" content="width=device-width, initial-scale=1.0">放在<head>里，越早越好。我个人习惯放在title下面、其他meta上面。
它有几个核心属性，我一个个说。
2.2.1 width=device-width
这个属性告诉浏览器：用设备的真实宽度来渲染页面。
举个例子。iPhone 14的物理像素是390px（CSS像素）。如果你写width=390，那也行，但换到iPhone 14 Pro Max（430px）就崩了。
device-width会自动适配不同设备。我在项目中遇到过有人写死width=320的，结果在折叠屏手机上页面直接裂开。所以——
核心原则：永远用 width=device-width，不要写死数值。
2.2.2 initial-scale
这个控制初始缩放比例。1.0就是100%，不缩放。
你可能会想：我都设了width=device-width了，还要这个干嘛？
原因有点绕。有些浏览器（比如老版Safari）在横竖屏切换时，会偷偷改变缩放比例。加上initial-scale=1.0，就是告诉它：别乱动。
<meta name="viewport" content="width=device-width, initial-scale=1.0">这两个属性通常成对出现。我建议你永远这么写，别省。
2.2.3 user-scalable
这个属性控制用户能不能缩放页面。
<!-- 禁止缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- 允许缩放（默认） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">注意：禁止缩放会影响无障碍访问。视障用户可能需要放大才能看清内容。我曾经在一个政府项目中因为禁用了缩放，被用户投诉到甲方那里……从那以后，除非是游戏或特殊交互场景，我一般保留缩放能力。
2.3 其他属性
还有两个属性，虽然不常用，但面试常考：
| 属性 | 说明 | 推荐值 |
|---|---|---|
| minimum-scale | 最小缩放比例 | 0.5 或 1.0 |
| maximum-scale | 最大缩放比例 | 2.0 或 5.0 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">为什么要限制？因为有些用户会不小心双指放大，然后页面就回不去了。限制一下，体验会好很多。
2.4 常见问题与避坑
避坑指南1：我曾经在微信内置浏览器里遇到过——明明设了viewport，但页面还是缩放。后来发现是微信的X5内核有自己的一套逻辑。解决方案：在meta后面加一句 user-scalable=no，或者用JS监听touch事件。
避坑指南2：有些同学喜欢写 width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no——四个属性全上。其实没必要。我一般只写前两个，除非有特殊需求。
我的推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">简单、干净、够用。如果项目对无障碍有要求，再加个 maximum-scale=3.0。
2.5 总结
viewport meta标签，说白了就是告诉浏览器：别自作聪明，按真实尺寸来。核心就三个属性：
- width=device-width — 适配设备宽度
- initial-scale=1.0 — 初始不缩放
- user-scalable — 控制用户缩放（慎用no）
你想想看，移动端适配的第一步就是这个标签。如果它写错了，后面所有的rem、vw、flex布局都是白搭。所以——
嗯，每次新建项目，第一件事就是把这个meta标签怼上去。养成习惯，少走弯路。
下一章我们聊聊「物理像素、逻辑像素与DPR」，到时候你会更清楚为什么device-width在不同手机上表现不一样。咱们下章见。
公众号:蓝海资料掘金营，微信deep3321