一、移动端适配基础：视口、像素与DPR
做移动端开发，第一个绕不开的概念就是「视口」。
我记得刚入行那会儿，拿着一个PC端写好的页面在手机上打开，文字小得像蚂蚁，整个页面缩成一团。当时我就纳闷：明明屏幕尺寸差不多，为什么显示效果差这么多？
后来才明白，这里头藏着三个关键概念：视口、物理像素与逻辑像素、设备像素比。搞懂它们，移动端适配才算真正入门。
1.1 视口（Viewport）到底是什么？
说白了，视口就是浏览器用来渲染页面的「虚拟窗口」。在PC上，视口宽度基本等于浏览器窗口宽度。但在手机上，情况就复杂了。
移动端浏览器默认会设置一个「布局视口」，宽度通常是980px或1024px。你想想看，一个宽度375px的手机屏幕，硬要塞下980px的内容，那页面不缩成蚂蚁才怪。
所以我们需要用 <meta> 标签来控制它：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这行代码，我建议你每个移动端项目都加上。它的作用就是让布局视口宽度等于设备宽度，并且初始缩放比例为1。
核心要点：
- 布局视口：CSS布局的参考坐标系，默认980px
- 视觉视口：用户实际看到的区域
- 理想视口：布局视口 = 设备宽度，就是我们用meta标签设置的目标
1.2 物理像素 vs 逻辑像素
这两个概念，我当年花了整整一周才彻底搞明白。
物理像素：屏幕上一个一个的发光点。iPhone 14 Pro的物理分辨率是2556×1179，就是说它有2556×1179个物理像素点。
逻辑像素：CSS里写的 width: 375px 中的px，就是逻辑像素。它跟物理像素没有直接对应关系。
为什么会这样？因为苹果在iPhone 4时代搞了个Retina屏幕，把物理像素密度翻了一倍。如果CSS的1px还对应1个物理像素，那文字和图标就会小到看不清。
所以系统做了一个映射：1个逻辑像素对应2个或3个物理像素。这就是设备像素比（DPR）的由来。
1.3 设备像素比（DPR）
DPR = 物理像素 / 逻辑像素
举个例子：
- iPhone SE（第3代）：逻辑宽度375px，物理宽度750px，DPR = 2
- iPhone 14 Pro：逻辑宽度393px，物理宽度1179px，DPR ≈ 3
我在项目中遇到过一个问题：用1px的边框在DPR=3的屏幕上看起来太细，在DPR=2的屏幕上又刚好。后来我用了 0.5px 配合媒体查询才解决。
我的经验：
获取当前设备的DPR，可以用 window.devicePixelRatio。但实际开发中，我更推荐用CSS媒体查询来处理不同DPR下的样式差异。
1.4 移动端屏幕尺寸分类
做适配，首先得知道你的目标设备长什么样。我一般把移动端屏幕分成这几类：
| 分类 | 逻辑宽度范围 | 典型设备 | DPR |
|---|---|---|---|
| 小屏手机 | 320px - 375px | iPhone SE、旧款安卓 | 2 |
| 主流手机 | 375px - 414px | iPhone 14、小米13 | 2~3 |
| 大屏手机 | 414px - 430px | iPhone 14 Pro Max | 3 |
| 平板 | 768px 以上 | iPad、安卓平板 | 2 |
注意，这里说的宽度都是逻辑像素。你写CSS时，只需要关心逻辑像素，物理像素的事交给系统和浏览器去处理。
避坑指南：
我曾经在项目里直接用了物理像素来写样式，结果在DPR=3的设备上，所有元素都缩成了1/3大小。嗯，那次的教训就是：永远不要在CSS里直接使用物理像素值。
1.5 实战：如何获取这些关键数据？
在浏览器控制台里，你可以快速查看当前设备的视口信息：
// 获取逻辑像素宽度
console.log(window.innerWidth)
// 获取设备像素比
console.log(window.devicePixelRatio)
// 获取物理像素宽度
console.log(window.screen.width * window.devicePixelRatio)我个人习惯在开发调试时，把这些信息打印在页面左上角，方便随时对照。
小结
这一章的内容，说白了就是让你明白一件事：移动端适配的核心，是处理好「逻辑像素」和「物理像素」之间的映射关系。视口是桥梁，DPR是比例尺，屏幕尺寸是画布大小。
下一章，我们会聊rem、vw/vh这些适配方案。但在此之前，我建议你打开手边的手机，用上面的代码看看它的DPR和逻辑宽度——亲手验证过的知识，记得最牢。