跨平台开发之兼容问题处理

1.ios端fixed属性无效

解决方案 position :sticky top：0

吸顶模式有效解决ios无法固定头部导航的问题

ps:禁用overflow:hidden

2.ios光标问题

3.安卓手机（小米8）滑动不流畅问题

passive属性设置为true

4.禁止ios页面缩放

window.onload=function () {

      禁止双击放大

      document.addEventListener('touchstart',function (event) { 

            if(event.touches.length>1){ 

                event.preventDefault(); 

            } 

        }) 

        var lastTouchEnd=0; 

        document.addEventListener('touchend',function (event) { 

            var now=(new Date()).getTime(); 

            if(now-lastTouchEnd<=300){ 

                event.preventDefault(); 

            } 

            lastTouchEnd=now; 

        },false);

      禁止手势放大

      document.addEventListener('gesturestart', function (event) {

        event.preventDefault();

      });

}

5.ios无法识别a标签的打电话功能

<a href="tel:4008001234" class="call"></a>。

解决方案

ios端封装打电话事件，前端调用

6.ios input的阴影

input:focus {outline:none}

input:{-webkit-appearance:none;}

7.oppo、vivo手机不支持es6语法

安装babel，把es6转化成es5

安装node环境--下载lts支持版--初始package.json：npm init -y 

安装 npm install --save-dev babel-preset-env babel-cli

创建文件并配置：.babelrc

文件：babel src /index.js -o dist/index.js  (-o  输出)

文件夹：babel src -d dist