17370845950

移动端适配核心在于理解viewport、CSS像素、设备像素和dpr关系并协同使用；需正确设置viewport meta标签，处理高清屏1px边框，结合rem/vw等弹性单位布局，并谨慎使用JS获取屏幕信息。

移动端适配的核心是让页面在不同尺寸、不同像素密度的设备上都能清晰、等比、可交互地显示。关键不在“写多少代码”，而在于理解 视口（viewport）、CSS 像素、设备像素 和 设备像素比（dpr） 之间的关系，并合理协同使用。

正确设置 viewport 是基础

没有合理的 viewport，后续所有适配都会失准。必须在 HTML 的 中声明：

其中最重要的是 width=device-width —— 它让 CSS 的 1px 宽度对应设备的「理想视口宽度」（通常≈设备独立像素，如 iPhone 14 是 390 CSS px），而不是默认的 980px 或其他固定值。

注意：
- 不要设 user-scalable=yes 后又禁止缩放（如某些 H5 活动页），容易引发双击放大/误触；
- initial-scale=1.0 必须与 width=device-width 配合，否则可能造成缩放错位；
- 在 iOS Safari 中，若页面有表单输入框，系统可能自动缩放，可通过 input, select, textarea { font-size: 16px; } 缓解。

理解 dpr 并处理高清屏下的 1px 边框

设备像素比（dpr）= 物理像素 / 设备独立像素。例如 iPhone 13 的 dpr = 3，意味着 1 个 CSS 像素实际由 3×3=9 个物理像素渲染。这导致传统 border: 1px solid #ccc 在高 dpr 下显得过粗、发虚。

常用解决方式：

• 用 transform: scaleY(0.33)（配合 dpr 动态计算）压缩伪元素或边框高度；
• 用媒体查询 + background-image: linear-gradient() 绘制 0.5px 线；
• 借助 postcss 插件（如 postcss-pxtorem 或 postcss-plugin-px2rem）统一转换；
• 更现代的做法：直接使用 border: 1px solid #ccc，并配合 device-pixel-ratio 媒体查询做降级，多数场景已足够清晰。

响应式布局 + 弹性单位组合使用

不要只依赖 px，也不必强推 rem/vw 到极致。合理分层：

• 字体大小：优先用 rem，根字体（html { font-size }）按屏幕宽度动态设置（如用 JS 设置或用 vw 计算）；
• 间距和容器宽高：可用 vw/vh（如 width: 90vw）、% 或 flex 布局；
• 图标、按钮等组件尺寸：建议用 em 或固定 px（配合 dpr 缩放逻辑）；
• 避免固定写死 375px 宽度：用 max-width: 100% + margin: 0 auto 保证在大屏上居中不拉伸。

JS 中获取真实屏幕信息要谨慎

不要只看 window.innerWidth 或 screen.width，它们返回的值受 viewport 和缩放影响：

• window.innerWidth 返回的是当前视口的 CSS 像素宽度（受 zoom 影响）；
• screen.width 是设备屏幕的 CSS 像素宽度（通常等于 device-width）；
• window.devicePixelRatio 才是关键——它告诉你当前设备的 dpr，可用于动态加载资源、调整 canvas 分辨率、修正 touch 事件坐标等；
• 监听 resize 和 orientationchange 事件时，注意 iOS Safari 可能触发多次，建议加防抖。