Android & IOS兼容性问题一、iOS 相关 1. 链接跳转问题：window.open 在 iOS Safa

一、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 暴露原生复制方法。

function copyToClipboardNew(text) {
  console.log('copyToClipboardNew params', text, typeof text)

  // 先检测 execCommand 是否可用
  if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
    const input = document.createElement('input')
    input.value = text
    document.body.appendChild(input)
    input.select()
    input.setSelectionRange(0, 99999) // 移动端兼容

    try {
      const ok = document.execCommand('copy')
      ok ? console.log('复制成功 方法1') : console.error('复制失败 document.execCommand')
    } catch (err) {
      console.error('复制失败 catch', err)
    } finally {
      document.body.removeChild(input)
    }

  // 现代 API
  } else if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
    navigator.clipboard.writeText(text)
      .then(() => console.log('复制成功 方法2'))
      .catch(() => console.error('复制失败，navigator.clipboard'))
  } else {
    console.error('复制失败，浏览器不支持')
  }
}

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

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

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

// 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)
  }
})

弹框内容容器需设置：

.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%。

<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 控制：

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

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

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

要点：rem 计算依据 window.getComputedStyle(document.documentElement).fontSize，
系统字体变化会使其变大。

参考方案：

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

4. 微信公众号 H5 登录 Cookie 丢失

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

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

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

Android & IOS兼容性问题