【H5】H5安卓、ios兼容性问题
一、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); /*androd*/
appearance: none; /*去除系统默认appearance的样式,常用于IOS下移除原生样式(下拉框去掉右侧图标等)*/
-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:none
6、禁止IOS和android用户选中文字
-webkit-user-select:none
7、禁止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; /*设置内嵌的元素在 3D 空间如何呈现：保留 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);
}