Android & IOS兼容性问题

一、iOS 相关

1. 链接跳转

问题：window.open 在 iOS Safari 中经常被拦截或失效。
建议：

使用 <a target="_blank"> 并触发真实点击。
或者使用window.location.href跳转

2. iOS 18 复制失败

现象：点击按钮先发请求再复制文本，复制失败。
原因：苹果安全策略要求复制操作必须来自同步且直接的用户手势 （click、touchstart、keydown 等），

一旦中途有 await fetch、Promise.then、setTimeout 等异步步骤，就会被判定为非用户手势。

解决方案

预拉取数据 ：提前请求接口，在用户点击时直接同步 navigator.clipboard.writeText。
二次点击：先弹框展示文案，用户再点"复制"按钮。
App 内方案：如果是自家 App，可在 WebView 暴露原生复制方法。

3. 弹框滚动穿透（橡皮筋回弹）

现象：弹框内部滚动时，底部页面仍能被拖动或回弹。
原因：iOS WebKit 的系统级回弹，不受 overflow:hidden 单独控制。

解决方案 ：在弹框显示时锁定 body 滚动，隐藏时恢复。

ini 复制代码

// Vue 示例：监听 visible
let scrollTop = 0
watch(() => props.visible, (val) => {
  if (val) {
    scrollTop = window.scrollY
    document.body.style.position = 'fixed'
    document.body.style.top = `-${scrollTop}px`
    document.body.style.left = '0'
    document.body.style.right = '0'
    document.body.style.width = '100%'
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.position = ''
    document.body.style.top = ''
    document.body.style.left = ''
    document.body.style.right = ''
    document.body.style.width = ''
    document.body.style.overflow = ''
    window.scrollTo(0, scrollTop)
  }
})

弹框内容容器需设置：

css 复制代码

.modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

二、Android 相关

1. OPPO 手机 `flex:1` 无效

现象：input 使用 flex:1 不能自适应宽度。
解决方案

方案一 ：直接给 input 固定宽度。
方案二 ：为 input 包一层父容器并设置 flex:1，input 自身 width:100%。

xml 复制代码

<div class="content">
  <div class="left">left</div>
  <div class="input-box">
    <input />
  </div>
  <div class="right">right</div>
</div>

<style>
.content {
  display: flex;
}
.left, .right {
  width: 100px;
}
.input-box {
  flex: 1;
}
.input-box input {
  width: 100%;
}
</style>

2. `line-height` 偏上

现象：文本无法垂直居中。
建议：使用 flex 布局代替 line-height 控制：

css 复制代码

.parent {
  display: flex;
  align-items: center;
}

3. 系统字体缩放导致 REM 计算异常

现象：H5 页面在 App WebView 中，系统字体变大会影响 rem 布局。

要点：rem 计算依据 window.getComputedStyle(document.documentElement).fontSize，

系统字体变化会使其变大。

参考方案：

在 WebView 固定默认字体大小，避免系统缩放。
详情见 rem 布局与系统字体大小问题。

现象：部分用户再次进入页面需重新登录。
原因：微信内置浏览器的 Cookie 隔离或跨域策略。
建议：

使用后端 Session + Token 替代纯 Cookie。
或在授权回调中带上自定义参数并刷新 Token。

以上内容可直接作为移动端适配问题速查表，涵盖 iOS 与 Android 的常见坑、原因及对应解决方案。