4、视口与像素：物理像素、逻辑像素、设备像素比(DPR)、视口(viewport)设置、meta标签详解

做移动端开发，第一个绕不开的概念就是「像素」。

我记得刚入行那会儿，拿着设计稿在手机上预览，怎么都对不上。明明标注的是 375px 宽，结果在 iPhone 上看着特别小。后来才明白——原来像素这玩意儿，分好几种。

4.1 物理像素 vs 逻辑像素

先搞清楚两个基本概念：

• 物理像素：屏幕上的真实发光点。一块 1080×1920 的屏幕，就是有 1080 列、1920 行的小灯珠。
• 逻辑像素：CSS 里写的 px。比如你写 width: 375px，这个 375 就是逻辑像素。

为什么要有两套？说白了，早期手机屏幕像素密度低，一个 CSS 像素对应一个物理像素。后来 Retina 屏出来了，物理像素密度翻倍，如果还一对一映射，字会小到看不清。

4.2 设备像素比（DPR）

DPR 就是连接物理像素和逻辑像素的桥梁。

DPR = 物理像素 / 逻辑像素

举个例子：

• iPhone 6/7/8：物理像素 750×1334，逻辑像素 375×667，DPR = 2
• iPhone 6 Plus/7 Plus：物理像素 1080×1920，逻辑像素 414×736，DPR ≈ 2.6
• iPhone X 及以上：物理像素 1125×2436，逻辑像素 375×812，DPR = 3

我在项目中遇到过一个问题：设计稿给的是 750px 宽（2x 图），我直接写 width: 750px，结果在手机上撑出了屏幕。后来才意识到——设计稿是按物理像素给的，CSS 里得除以 DPR。

4.3 视口（Viewport）

视口，就是浏览器用来渲染页面的那块区域。移动端有仨视口，容易搞混：

视口类型	说明
布局视口	CSS 布局参考的基准，默认 980px（大部分浏览器）
视觉视口	用户肉眼看到的屏幕区域
理想视口	设备最合适的视口宽度，等于逻辑像素宽度

你想想看，如果不做任何设置，移动端浏览器默认用 980px 的布局视口去渲染。一个 375px 宽的手机，要缩到 375/980 ≈ 38% 才能显示全。字自然就小了。

所以我们需要告诉浏览器：「别自作主张，用我的设置来。」

4.4 meta 标签详解

核心就是这一行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

拆开来看：

• width=device-width：布局视口宽度 = 设备逻辑像素宽度。说白了就是「别用 980 了，用手机自己的宽度」。
• initial-scale=1.0：初始缩放比例 1:1。不放大也不缩小。

还有几个可选参数：

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
  maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

参数	作用
maximum-scale	最大缩放比例
minimum-scale	最小缩放比例
user-scalable	是否允许用户缩放

我曾经踩过一个坑：项目上线后，用户反馈页面能双指缩放，布局全乱了。查了半天，发现是 meta 标签里漏写了 initial-scale=1.0。加上就解决了。

4.5 实战中的常见问题

说几个我实际遇到过的场景：

1. 1px 边框问题：在 DPR=2 的屏幕上，CSS 的 1px 实际占 2 个物理像素。想画真正的 1px 线？可以用 transform: scaleY(0.5) 或者用 0.5px（但兼容性一般）。
2. 图片模糊：在 Retina 屏上，一张 100×100 的图片会被拉伸到 200×200 物理像素。所以设计稿给 2x 图，你就得准备 2x 尺寸的图片。
3. rem 适配：通过 JS 动态设置 html 的 font-size，让 rem 单位随屏幕宽度变化。但说实话，现在我更推荐用 vw 单位，更简洁。

4.6 总结一下

嗯，这一章内容不少，但核心就几点：

• 物理像素是硬件，逻辑像素是 CSS 单位，DPR 是桥梁
• meta viewport 必须设置，不然移动端体验一塌糊涂
• 1px 边框、图片适配、rem/vw 方案，都是 DPR 带来的连锁反应

搞懂了这些，移动端适配的底子就算打牢了。下一章我们聊聊具体的布局方案，看看 Flexbox 和 Grid 在移动端怎么用才顺手。