为什么 iPhone 放大到 2 倍就模糊？
在使用 iPhone 浏览网页或查看图片时，你是否注意到：当页面被放大（例如缩放比例为 200%）后，原本清晰的内容突然变得模糊？这并非设备故障，而是由屏幕显示原理和网页图像处理机制共同作用的结果。
1. Retina 屏幕与设备像素比（DPR）
iPhone 使用的是 Apple 的 Retina 显示屏，其特点是物理像素密度远高于传统屏幕。例如：
- iPhone 13/14 的逻辑分辨率为 390×844，但实际物理像素为 1170×2532。
- 设备像素比（Device Pixel Ratio, DPR）为 3，意味着 1 个 CSS 像素对应 3×3 = 9 个物理像素。
这种高 DPR 设计让文字和图像在正常缩放下极其锐利。
2. 为什么放大后会模糊？
当你将网页放大到 2 倍（200%）时，浏览器会进行以下操作：
- 将 CSS 像素尺寸放大 2 倍；
- 但原始图像资源并未随之提供更高分辨率版本；
- 浏览器只能对现有图像进行插值放大（如双线性插值），导致边缘模糊、细节丢失。
关键点：模糊不是因为 iPhone 屏幕差，而是因为图像源未适配高缩放场景。
3. 开发者如何避免此问题？
如果你是网页开发者，可通过以下方式优化体验：
- 使用矢量图形（SVG）代替位图（PNG/JPG）；
- 为关键图片提供 2x 或 3x 高分辨率版本，并通过
<img srcset> 指定；
- 使用 CSS 的
image-rendering: pixelated（适用于像素艺术）或确保图像足够大；
- 避免固定宽度的图片，使用响应式设计（
max-width: 100%）。
4. 用户能做什么？
作为普通用户，你可以：
- 尽量避免过度放大网页；
- 使用 Safari 的“请求桌面网站”功能（有时桌面版图片更大）；
- 在支持的应用中启用“高分辨率模式”（如部分阅读器或相册应用）。
结语
iPhone 放大后模糊是数字图像显示中的普遍现象，并非缺陷。理解背后的原理，有助于我们更好地设计网页或合理使用设备。