移动端适配核心在于理解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 或其他固定值。
立即学习“Java免费学习笔记（深入）”；
注意：
- 不要设 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 可能触发多次，建议加防抖。
