App内嵌 H5 页面兼容性问题

关于 iOS 系统中，中文输入法输入英文时
嵌套伪类在ios上可能出现兼容问题，所以在写按钮的时候不妨直接重写样式，或是不要多层嵌套伪类

css3动画的ios兼容问题：

   在写从底部飞入这种效果的时候 需要注意，第一次的时候，是用定位的变化来写 @keyframe 的，
   后面在ios上出现动画失效的现象。

   解决：**改成用translate位移变化来实现**

键盘调用问题
ios版本支持webp
底部安全区域
Date.now()方法失效
上传照片重刷页面(意见反馈)
调测 vcosole 兼容问题(www.jianshu.com/p/42f7d3caa…)
包括JSBridge版本兼容

sticky兼容性问题，上滑内容消失

  //触底请求下一页
  cont scrollHandle = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 285) {
      //解决ios sticky兼容性问题，上滑内容消失
      setTabsFixed(true)
      } else {
      setTabsFixed(false)
      }
  }

二：在开发移动端 H5（HTML5）应用时，常见的安卓和 iOS 浏览器兼容问题包括：

1. CSS 样式差异

iOS 上的 overflow: auto; ：
- 在 iOS 上，overflow: auto; 的滚动行为可能与其他浏览器不同，可能需要添加 -webkit-overflow-scrolling: touch; 来启用惯性滚动。
- 解决方案：
```
css
复制代码
.scroll-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
```
安卓上的 position: fixed; ：
- 在某些安卓浏览器中，position: fixed; 元素可能无法正常工作，导致固定位置元素在滚动时不保持固定。
- 解决方案：可以使用 JavaScript 实现类似的效果，或在样式上做些调整。

2. 输入框和软键盘

iOS或部分安卓输入框被软键盘遮挡：

方法一：滚动视图

当输入框被遮挡时，通过脚本将视图滚动，使输入框可见。

scrollIntoView是DOM内置的方法

javascript
复制代码
document.querySelector('input').addEventListener('focus', function() {
    setTimeout(() => {
        //`scrollIntoView` 方法使输入框滚动到视口的可见区域。`{ behavior: 'smooth' }` 确保滚动是平滑的。
        this.scrollIntoView({ behavior: 'smooth' });
    }, 300); // 等待键盘弹出
});

方法二：调整页面布局

动态调整输入框的位置，使其在键盘弹出时保持可见。

javascript
复制代码
document.querySelector('input').addEventListener('focus', function() {
    document.querySelector('.container').style.marginBottom = '300px'; // 增加下方的空白区域
});

document.querySelector('input').addEventListener('blur', function() {
    document.querySelector('.container').style.marginBottom = '0'; // 恢复原状
});

方法三：使用 CSS `viewport-units`

使用 CSS 视口单位，如 vh，使得输入框在屏幕高度变化时保持可见。

css
复制代码
.container {
    height: 100vh;
    overflow-y: auto;
}

方法四：监听窗口变化

在窗口尺寸变化时，调整输入框的滚动位置或其他布局。

javascript
复制代码
window.addEventListener('resize', () => {
    if (document.activeElement.tagName === 'INPUT') {
        document.activeElement.scrollIntoView({ behavior: 'smooth' });
    }
});

3. 触摸事件

点击延迟：

在移动浏览器中，点击事件有 300ms 的延迟，这是为了区分双击和单击。

解决方案：使用 FastClick 库来消除点击延迟。

javascript
复制代码
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
}

iOS 上的双击缩放：
- 在 iOS 设备上，快速双击页面会导致页面缩放。
- 解决方案：使用 CSS 禁用双击缩放。
```
css
复制代码
html, body {
  touch-action: manipulation;
}
```

4. 媒体播放

自动播放：
- 在移动设备上，媒体（音频、视频）通常不能自动播放，需要用户交互。
- 解决方案：在用户交互事件（如点击）中触发播放。
```
javascript
复制代码
document.querySelector('button').addEventListener('click', function() {
  var video = document.querySelector('video');
  video.play();
});
```

5. 视口和缩放

视口设置：
- 在移动设备上正确设置视口是必要的，以确保页面在不同设备上显示正确。
- 解决方案：添加适当的 <meta> 标签。
```
html
复制代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
```

6. 特性检测

浏览器功能检测：
- 不同的移动浏览器对 HTML5 和 CSS3 特性的支持程度不同。
- 解决方案：使用 Modernizr 进行特性检测并提供相应的回退。
```
html
复制代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
```

7. 平台特有问题

iOS 上的 backface-visibility 问题：
- 某些版本的 Safari 在处理 backface-visibility: hidden; 时有渲染问题。
- 解决方案：确保元素的 transform 和 backface-visibility 设置正确。
```
css
复制代码
.flip {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
```
安卓上的字体渲染问题：
- 某些安卓浏览器中的字体渲染效果不佳。
- 解决方案：使用 Web 字体和适当的字体平滑设置。
```
css
复制代码
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

通过了解这些常见的兼容性问题及其解决方案，开发者可以更好地优化移动端 H5 应用的用户体验，确保在不同设备和浏览器上都能正常运行。

H5开发亲历记： 解决兼容性问题的那些坑与妙招