移动端适配：为什么我的页面在 iPhone 和 Android 上长得不一样？

移动端适配是前端开发中常见的问题，尤其是在不同设备上页面表现不一致时，开发者往往会感到困惑。iPhone 和 Android 设备的屏幕尺寸、分辨率、浏览器内核以及系统特性差异较大，导致同一套代码在不同设备上渲染效果不同。以下从多个角度分析原因，并提供解决方案。

屏幕尺寸与分辨率差异

iPhone 和 Android 设备的屏幕尺寸和分辨率差异显著。例如，iPhone 13 的屏幕宽度为 375pt（逻辑像素），而 Android 设备如小米 12 的逻辑像素宽度可能为 393dp。此外，Android 设备的屏幕比例更加多样化，从 16:9 到 20:9 不等，而 iPhone 的比例相对固定。

/* 使用 viewport 适配 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果不显式设置 viewport，部分 Android 设备会默认以 980px 的宽度渲染页面，导致内容缩小。而 iPhone 通常会以设备的逻辑像素宽度作为基准。

DPR（设备像素比）的影响

DPR（Device Pixel Ratio）是物理像素与逻辑像素的比值。iPhone 的 DPR 通常为 2 或 3，而 Android 设备的 DPR 可能从 1 到 4 不等。高 DPR 设备会以更多物理像素渲染同一逻辑像素的内容，可能导致图片模糊或边框过粗。

/* 针对高 DPR 设备优化图片 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 100px 100px;
  }
}

浏览器内核与 CSS 兼容性

iPhone 使用 Safari 浏览器，基于 WebKit 内核；而 Android 设备可能使用 Chrome（Blink 内核）或厂商定制浏览器。不同内核对 CSS 属性的支持程度不同，例如：

• position: sticky 在早期 Android WebView 中支持较差。
• flexbox 的某些特性在旧版本 Android 上需要前缀。

/* 兼容旧版本 Android 的 flexbox */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

系统字体与默认样式

iOS 和 Android 的系统默认字体不同。iOS 使用 San Francisco，Android 使用 Roboto 或厂商定制字体。此外，系统默认的 margin 和 padding 也可能不同：

/* 重置默认样式 */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

触摸事件与交互差异

iOS 和 Android 的触摸事件处理机制不同。例如，iOS 有“弹性滚动”效果，而 Android 的滚动行为更线性。此外，长按、双击等手势的默认行为也可能不同：

// 禁用 iOS 的弹性滚动
document.body.addEventListener('touchmove', function(e) {
  if (e.scale !== 1) e.preventDefault();
}, { passive: false });

单位选择的适配问题

使用 px 固定单位可能导致在不同 DPR 设备上显示不一致。推荐使用 rem 或 vw/vh 等相对单位：

/* 基于 rem 的适配方案 */
html {
  font-size: calc(100vw / 3.75); /* 以 375px 设计稿为例 */
}
.box {
  width: 1rem; /* 相当于设计稿中的 100px */
}

安全区域与刘海屏适配

iPhone X 及以后的机型引入了刘海屏和底部 Home 指示条，需要处理安全区域：

/* 适配 iPhone 安全区域 */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

Android 设备也可能有类似的挖孔屏或曲面屏，需通过 viewport-fit=cover 声明：

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

实际案例：按钮高度不一致

假设一个按钮在 iPhone 上高度为 44px，而在 Android 上显示为 48px。这是因为 iOS 人机交互指南推荐最小点击区域为 44pt，而 Android 的 Material Design 建议为 48dp。

/* 统一按钮高度 */
.button {
  min-height: 44px;
}
@media (min-width: 600px) {
  .button {
    min-height: 48px;
  }
}

动态适配方案

通过 JavaScript 动态检测设备类型或特性，针对性调整样式：

const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
if (isIOS) {
  document.documentElement.classList.add('ios');
}

/* 针对 iOS 的特定样式 */
.ios .header {
  padding-top: 20px;
}

测试与调试工具推荐

• Chrome DevTools：模拟不同设备尺寸和 DPR。
• Safari Responsive Design Mode：测试 iOS 设备表现。
• Android Studio Emulator：调试 Android 兼容性。
• Real devices：真机测试必不可少。