iOS 与 Android 兼容性常见坑点排查指南

鱼人
3 阅读4分钟

iOS 与 Android 兼容性常见坑点排查指南

在移动端开发（无论是 H5 还是小程序）中，iOS 和 Android 的兼容性问题一直是开发者的噩梦。开发者工具往往无法完全模拟真机的系统行为，导致“模拟器里岁月静好，真机上 Bug 频出”。本文将针对你提到的四个核心痛点——日期格式解析、软键盘遮挡、滚动穿透及 Textarea 输入法 Bug，进行深度剖析并提供经过验证的解决方案。

日期格式解析：iOS 的“顽固”与 Android 的“宽容”

这是最经典且隐蔽的坑点之一。在 Android 和现代浏览器中，new Date('2020-01-01') 或 new Date('2020-01-01 12:00:00') 能够正常解析，但在 iOS（尤其是旧版本）中，这会返回 Invalid Date 或 NaN。

核心原因 iOS 的 WebKit 内核（Safari）严格遵循早期的 ECMAScript 标准，仅支持 ISO 8601 格式中的连字符（2020-01-01），但不支持连字符与时间组合的格式（2020-01-01 12:00:00），也不支持中文横杠。它更倾向于斜杠格式（2020/01/01）。

通用解决方案 不要依赖浏览器的自动解析，统一将日期字符串中的横杠 - 替换为斜杠 /，或者使用不带时区的时间戳。

// 封装一个兼容性日期转换函数
function parseDate(dateStr) {
  if (!dateStr) return '';
  // 将所有的 - 替换为 /
  const formattedDate = dateStr.replace(/-/g, '/');
  return new Date(formattedDate);
}

// 使用示例
const timeStr = "2023-10-01 12:30:00";
const dateObj = parseDate(timeStr);
console.log(dateObj); // iOS 和 Android 均能正常输出

软键盘遮挡：视口（Viewport）的博弈

当输入框位于页面底部时，软键盘弹起往往会遮挡输入框。这在 iOS 和 Android 上的表现截然不同：Android 通常会压缩视口（Visual Viewport），而 iOS 往往只是将键盘浮在页面之上，不改变视口高度。

核心原因

  • Android：键盘弹起时，window.innerHeight 会变小，页面布局会被压缩，但有时自动滚动不到位。
  • iOS：键盘弹起时，window.innerHeight 往往不变，导致输入框被键盘物理遮挡，且 scrollIntoView 在某些 WebView 中失效。

解决方案 监听视口变化或焦点事件，强制将输入框滚动到可视区域。

// 针对输入框被遮挡的通用处理逻辑
function handleInputFocus(inputElement) {
  // 延迟执行，等待键盘完全弹起
  setTimeout(() => {
    // 获取输入框相对于视口的位置
    const rect = inputElement.getBoundingClientRect();
    const windowHeight = window.innerHeight;
    
    // 判断输入框是否在可视区域底部（预留一定空间，如键盘高度的 1/4）
    if (rect.bottom > windowHeight * 0.75) {
      // 计算需要滚动的距离
      const scrollOffset = rect.bottom - windowHeight + 100; // 100px 为安全距离
      window.scrollTo({
        top: window.pageYOffset + scrollOffset,
        behavior: 'smooth'
      });
    }
  }, 200); // iOS 建议延迟稍长一点
}

滚动穿透：弹窗背后的“幽灵滚动”

在打开模态弹窗（Modal/Dialog）时，用户滑动弹窗内容，底层的页面却随之滚动，这就是“滚动穿透”。这在 iOS 上尤为严重，因为 iOS 的滚动机制与 Android 不同。

核心原因 弹窗层虽然盖住了页面，但触摸事件（Touch Event）冒泡到了底层文档，导致底层页面响应了滚动行为。

解决方案

  1. CSS 方案（推荐） ：在弹窗打开时，禁止 body 的滚动。
  2. JS 方案（兜底） ：在弹窗层阻止默认触摸行为。
/* 定义一个禁止滚动的类 */
.no-scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
  /* 防止 iOS 橡皮筋效果 */
  height: 100%; 
}

// 打开弹窗时
document.body.classList.add('no-scroll');

// 关闭弹窗时
document.body.classList.remove('no-scroll');

// 针对 iOS 的额外 JS 拦截（可选）
// 在弹窗容器上监听 touchmove
modalElement.addEventListener('touchmove', function(e) {
  e.stopPropagation();
}, { passive: false });

Textarea 组件输入法 Bug：光标与高度的错位

在 Android 部分机型（尤其是使用搜狗、百度等第三方输入法）或 iOS 上，Textarea 经常遇到以下问题：

  • 输入多行文字后，光标位置与文字不对齐。
  • 输入法候选词遮挡文字。
  • 高度自适应失效，或者高度变化导致布局抖动。

核心原因

  • 行高计算差异：Android 某些 WebView 对 line-height 的计算与 CSS 设定不一致。
  • 输入法层级：第三方输入法往往运行在更高的层级，容易遮挡页面内容。

解决方案

  1. 避免使用 line-height 撑开高度：使用 padding 来控制内部间距，高度设为 auto 或 min-height。
  2. 强制重绘：在输入时触发微小的样式变更，强制浏览器重绘光标位置。
.textarea-fix {
  /* 错误做法：用 line-height 控制高度 */
  /* line-height: 40px; */
  
  /* 正确做法：使用 padding 控制内容间距 */
  padding: 10px 15px;
  line-height: 1.5; /* 使用倍数而非固定像素 */
  box-sizing: border-box;
  min-height: 100px;
}

总结

移动端兼容性是一场持久战。面对这些“坑”，最有效的策略是：

  1. 统一数据格式：时间处理统一转为时间戳或斜杠格式。
  2. 防御性编程：对键盘弹起、滚动行为做主动干预，不要依赖浏览器的默认行为。
  3. 真机调试：不要迷信模拟器，必须覆盖主流 iOS 和 Android 机型进行实地测试。
avatar
文章
阅读
粉丝