移动端开发中的兼容性问题

1. ‌1px物理像素边框模糊‌

‌现象‌ ：高清屏（Retina/OLED）上1px线条显示过粗。
‌方案‌：

css 复制代码

.border {  
  position: relative;  
  &::after {  
    content: '';  
    position: absolute;  
    width: 200%;  
    height: 200%;  
    border: 1px solid #000;  
    transform: scale(0.5);  
    transform-origin: 0 0;  
  }  
}

2. ‌点击事件300ms延迟‌

‌现象‌ ：早期移动端浏览器为区分点击与双击缩放产生的延迟。
‌方案‌：

ini 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

或使用FastClick库：

javascript 复制代码

import FastClick from 'fastclick';  
FastClick.attach(document.body);

3. ‌键盘弹出遮挡输入框‌

‌现象‌ ：输入框被软键盘覆盖（Android尤为严重）。
‌方案‌：

php 复制代码

// 输入框聚焦时滚动到可视区域  
input.addEventListener('focus', () => {  
  input.scrollIntoView({ behavior: 'smooth', block: 'center' });  
});

4. ‌iOS滑动卡顿‌

‌现象‌ ：页面滚动时出现明显卡顿感。
‌方案‌：

css 复制代码

.container {  
  -webkit-overflow-scrolling: touch;  
  overflow-y: auto;  
}

5. ‌Android图片加载失败

‌现象‌ ：WebP格式图片在低版本Android不兼容。
‌方案‌：

ini 复制代码

<picture>  
  <source srcset="image.webp" type="image/webp">  
  <img src="image.jpg" alt="fallback">  
</picture>

6. ‌安全区域适配（异形屏） ‌

‌现象‌ ：iPhone灵动岛、挖孔屏遮挡内容。
‌方案‌：

css 复制代码

body {  
  padding: env(safe-area-inset-top) env(safe-area-inset-right)  
           env(safe-area-inset-bottom) env(safe-area-inset-left);  
}

7. ‌Fixed定位抖动‌

‌现象‌ ：底部固定元素在键盘弹出时跳动。
‌方案‌：

css 复制代码

.footer {  
  position: absolute;  
  bottom: calc(20px + env(safe-area-inset-bottom));  
}

8. ‌跨平台字体渲染差异‌

‌现象‌ ：相同字号在iOS与Android显示粗细不一致。
‌方案‌：

css 复制代码

body {  
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;  
  -webkit-font-smoothing: antialiased;  
}

9. ‌视频播放全屏问题‌

‌现象‌ ：iOS默认强制全屏播放HTML5视频。
‌方案‌：

css 复制代码

<video controls playsinline webkit-playsinline>

10. ‌深色模式适配‌

‌现象‌ ：页面在系统切换深色模式时风格断裂。
‌方案‌：

css 复制代码

:root {  
  --bg: #fff;  
  --text: #333;  
}  
@media (prefers-color-scheme: dark) {  
  :root {  
    --bg: #1a1a1a;  
    --text: #e6e6e6;  
  }  
}  
body {  
  background: var(--bg);  
  color: var(--text);  
}