移动端屏幕适配需设置viewport使页面宽度等于设备宽度，并通过javascript动态获取devicepixelratio和屏幕尺寸，结合rem布局实现等比缩放；1. 设置meta viewport控制布局宽度与缩放；2. 使用js根据设计稿计算html的font-size，实现rem适配；3. 监听resize和orientationchange事件，及时调整布局；4. 利用env()和js判断刘海屏等安全区域，添加对应类名处理留白。
移动端屏幕适配的核心在于让页面在不同尺寸和分辨率的设备上都能正常显示。JavaScript 在这一过程中可以动态获取设备信息并调整布局，配合 CSS 能实现更灵活的响应式效果。
理解 viewport 与设备像素比
移动浏览器默认会将页面缩放到一个“理想”的宽度（通常是 980px 左右），这会导致布局错乱。通过设置 viewport meta 标签，可以让页面宽度等于设备屏幕宽度：
```html ```其中关键参数说明：
- width=device-width：使页面宽度等于设备屏幕宽度
- initial-scale=1.0：初始化不缩放
- user-scalable=no：禁止用户手动缩放（可选）
JavaScript 可以读取设备像素比（devicePixelRatio）来判断是否为高清屏（Retina），用于加载更高清的图片或做精细控制：
立即学习“Java免费学习笔记（深入）”；
```js const dpr = window.devicePixelRatio || 1; console.log('设备像素比:', dpr); ```使用 JavaScript 动态设置根字体大小（rem 适配）
常见做法是将页面布局基于 rem 单位，通过 JS 动态设置 标签的 font-size，从而实现等比缩放。
例如：设计稿宽度为 750px，我们希望 1rem = 100px，那么在 375px 宽的屏幕上，html 的 font-size 应为 50px（375 / 750 * 100）。
```js function setRootFontSize() { const designWidth = 750; // 设计稿宽度 const baseFontSize = 100; // 1rem 对应的像素值 const screenWidth = window.innerWidth; const fontSize = (screenWidth / designWidth) * baseFontSize; document.documentElement.style.fontSize = fontSize + 'px'; }// 初始化和窗口变化时更新 setRootFontSize(); window.addEventListener('resize', setRootFontSize);
