HoRain云项目实战：JavaScript屏幕适配全攻略

先说个真实场景。我在HoRain云上部署过一个小型数据看板，开发时全程用Chrome的设备模拟器预览，iPhone X、iPad、各种安卓机都切了一遍，感觉万无一失。结果项目交付给客户，对方的华为折叠屏一打开，页面直接横向溢出，底部工具栏被折叠屏的铰链区域吃掉一大截。那一刻我才意识到，模拟器只是模拟器，真机上的屏幕适配水比想象中深得多。

这篇文章就把我在HoRain云项目里折腾屏幕适配的完整过程写出来。不讲那些网上一搜一大把的基础概念，重点放在实测踩坑、方案选型逻辑和JavaScript在适配里真正不可替代的作用上。无论你是刚接触适配的新手，还是被各种机型折磨过一段时间的中级开发者，这篇文章应该都能给你一些能直接用的东西。

1. 适配的本质：先把"像素"这件事掰扯清楚

1.1 CSS像素从来就不是物理像素

很多人做适配做了一两年，还是没搞明白一个问题：为什么iPhone 15 Pro的屏幕分辨率是2556x1179，但CSS里写width: 390px就能铺满整个屏幕宽度？

这里面的关键就是devicePixelRatio（DPR），也就是设备像素比。物理像素是屏幕面板上真实存在的发光点，CSS像素是浏览器绘制页面时用的逻辑单位。两者的换算关系是：

code复制物理像素 = CSS像素 × DPR

iPhone 15 Pro的DPR是3，所以390个CSS像素对应的物理像素就是390×3=1170，再算上四舍五入正好对应屏幕的物理宽度。这也是为什么老牌安卓旗舰机分辨率号称2K，但DPR普遍在2.5到3之间，因为分辨率高不代表页面能显示更多内容，只是每个CSS像素对应的物理像素更多、画面更细腻。

JavaScript里有几个API专门干这个事：

javascript复制// 获取设备像素比，Retina屏一般是2或3
const dpr = window.devicePixelRatio || 1;

// 获取布局视口的实际宽度（单位是CSS像素）
const viewportWidth = document.documentElement.clientWidth;

// 获取屏幕的可用区域（CSS像素）
const screenWidth = window.screen.width;

在实际项目里，DPR最直接的用途有两个：一个是加载对应精度的图片资源，2倍屏加载2x图、3倍屏加载3x图，避免图片模糊或者浪费流量；另一个是绘制Canvas时按DPR缩放画布分辨率，否则画出来的线条在Retina屏上会发虚。

1.2 viewport meta的机制决定了"移动端适配"的起点

新手最容易忽略的一件事：如果HTML里没有<meta name="viewport">这行标签，移动端浏览器会默认用一个假想的980px（不同浏览器数值不同）来渲染页面，然后再缩小适配屏幕宽度。这就是为什么PC页面直接放到手机上看，字会小到看不清，因为整个页面被等比缩小了。

html复制<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

width=device-width的意思是让布局视口的宽度等于设备的CSS像素宽度。initial-scale=1.0是初始缩放比例。这两个搭配起来，浏览器就不再自作主张地缩放页面了。

viewport-fit=cover这个属性是专门为刘海屏准备的。如果不加，iOS Safari会在刘海区域两侧留出黑边；加了之后，页面可以延伸到全屏，然后由开发者自己通过safe-area-inset-*环境变量来处理内容的安全区域。

JavaScript在这里可以做一个很有用的验证操作，确认viewport是否真的按预期工作了：

javascript复制// 如果这两个值不相等，说明viewport设置有问题，或者页面被外部缩放了
if (window.innerWidth !== document.documentElement.clientWidth) {
  console.warn('viewport异常：innerWidth与clientWidth不一致');
}

2. 主流适配方案的选择逻辑：rem、vw与JS动态计算

2.1 rem方案的核心理念与隐藏代价

rem（root em）是相对根元素<html>的字体大小来计算的单位。如果根字号是16px，那么1rem就等于16px；如果根字号是20px，那么1rem就等于20px。

做适配的核心逻辑就是：用JavaScript根据视口宽度动态调整根字号，页面里所有用rem做单位的元素都会跟着等比缩放。

javascript复制(function initRem() {
  const baseWid