09_之前写过h5吗？有遇到过哪些兼容性问题？说下怎么解决的

2020-04-15 本文已影响0人沐向

一、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以外解决移动端禁止页面缩放的方法：

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

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方法在表单失去焦点的时候让页面滚动到最顶部。

<form class="form" action="" method="">
    <div>
        <label for="idNumber">身份证号</label><input type="text" name="idNumber" onblur="window.scrollTo(0, 0);" id="idNumber">
    </div>
</form>

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

 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

（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在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

5、禁止IOS弹出各种操作窗口

-webkit-touch-callout:none

6、禁止IOS和android用户选中文字

-webkit-user-select:none

7、禁止IOS识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

8、禁止IOS手机识别邮箱

<meta content="email=no" name="format-detection" />

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