一、H5兼容性问题
H5在安卓机型和IOS机型或者相同机型的不同浏览器中的某些样式会存在不一样的表现，所以需要解决相应的兼容性问题
二、IOS常见兼容性问题
1、IOS端兼容input光标高度
- 问题症状：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样
- 原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部）
- 解决方案：高度height和行高line-height内容用padding撑开
2、IOS键盘唤起，键盘收起以后页面不归位
- 问题症状：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑
- 原因分析：固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
- 解决方案：
changeBlur () { let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){ setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) }}- 拓展知识： position: fixed的元素在IOS里，收起键盘的时候会被顶上去，特别是第三方键盘
3、IOS端h5页面上下滑动时卡顿、页面缺失
- 问题描述：在IOS端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况
- 解决方案：只需要在公共样式加入下面这行代码
* { -webkit-overflow-scrolling: touch;}扩展知识：-webkit-overflow-scrolling是什么？
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
4、IOS移动端click事件300ms的延迟响应
-
问题描述：移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效
解决方案： -
fastclick可以解决在手机上点击事件的300ms延迟
-
zepto的touch模块，tap事件也是为了解决在click的延迟问题
-
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
5、IOS双击页面缩放禁止
- 问题描述：IOS10中自带的Safari浏览器不识别meta viewport
- IOS10以外解决移动端禁止页面缩放的方法：
- IOS10解决方案：
（1）禁用双指缩放
document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); }}, false);（2）禁用手指双击缩放
var lastTouchEnd = 0;document.documentElement.addEventListener('touchend', function (event) { var now = Date.now(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now;}, false);三、微信浏览器常见兼容性问题
1、填写表单信息弹出键盘会把页面顶上去，键盘消失的时候页面不自动下来
解决方案：使用onblur方法在表单失去焦点的时候让页面滚动到最顶部。
2、去除移动端点击时的背景
* { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }3、去掉input框的默认样式
input { background-color: transparent; filter: alpha(opacity=0); appearance: none; -moz-appearance: none; -webkit-appearance: none;}4、音视频不自动播放
- 原因分析：出于节省流量的初衷，IOS系统禁止音视频自动播放
- 解决方案：使用微信的JS-SDK
（1）先引入微信的JS-SDK
（2）然后在wx.ready中调用play方法播放
var audio = document.getElementById('bgmusic'); autoPlayAudio(); function autoPlayAudio() { wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { audio.play(); }); }四、其他兼容性问题
1、在IOS手机上，绑定click事件到非button元素的元素上，IOS下不会触发
解决方案：元素样式添加 cursor:pointer
2、在IOS中li元素按下会有阴影效果
-webkit-tap-highlight-color: transparent;3、在IOS中，input会有内阴影
-webkit-appearance:none;4、IOS下取消input在输入的时候英文首字母的默认大写
5、禁止IOS弹出各种操作窗口
-webkit-touch-callout:none6、禁止IOS和android用户选中文字
-webkit-user-select:none7、禁止IOS识别长串数字为电话
8、禁止IOS手机识别邮箱
9、IOS系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
解决方案：可以通过正则去掉 this.value = this.value.replace(/\u2006/g, '');
10、阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}11、在移动端修改难看的点击的高亮效果，IOS和安卓下都有效
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}12、往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。
解决方法 ：window.onunload = function(){};
13、Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal
14、在IOS和andriod中,audio元素和video元素无法自动播放
element.addEventListener('touchstart',function(){ audio.play()},false)15、消除 transition 闪屏
-webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; 16、CSS动画页面闪白，动画卡顿
解决方法:1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位2.开启硬件加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);17、fixed定位缺陷
原因分析：
- IOS下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
- android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
- IOS4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题
18、calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸。
解决方案：
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }来源地址：https://blog.csdn.net/angela_zhaoBei/article/details/131813407
