嵌入式webAPP应用的部分兼容性问题

通用性：

l 为解决点击延时添加 fastclick 导致

1：移动端虚拟键盘呼出时未能将页面置顶，遮盖输入框，切无法滑动至可见区；

2：点透现象：点击某一选择框时，拉出下一输入框可选项；

解决方案：去掉fastClick包的引用。

// const FastClick = require('fastclick')

// FastClick.attach(document.body)

 

Android：

Ios：

l Ios呼出虚拟键盘时的固定定位失效：

 

l 在固定定位的时候，滑动不流畅。

原因： 增加了overflow:auto;

解决方案1：删除overflow:auto ;

解决方案2：在滚动容器内加-webkit-overflow-scrolling: touch；但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。

解决方案3：body {overflow-x: hidden} 即，给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto

l Ios 10版本一下，不支持fetch 的使用。

解决方案：在

l Ios 10版本一下，ajex 请求的头信息 header 无法设置，只能在body内插入

Ios 10+版本：

 let requestConfig = {

      credentials: "include",

      method: type,

      headers: {

        Accept: "application/json",

        "Content-Type": "application/json",

        encryptedUserData: encryptedUserData

      },

      mode: "cors",

      cache: "no-cache"

    };

Ios 10- 版本

 if(dataInputModel=="2"){

    data.encryptedUserData = encryptedUserData

 }

 sendData = JSON.stringify(data)

 

 

 requestObj.open(type, url, true);

 requestObj.setRequestHeader("Content-type", contentType);

 if(dataInputModel=="1"){

    requestObj.setRequestHeader("encryptedUserData", encryptedUserData);

}

requestObj.send(sendData);

 

Vivo手机：

l 单页面多固定定位嵌套时 固定定位元素被滑动

原因：  

解决方案：使用绝对定位嵌套固定定位

 

Samsung手机：

 

Ios系统升级 11：屏幕固定定位的头部 会溢出 至时间栏

解决方案:增加固定定位的高度 iphoneX_height   

height: env(safe-area-inset-top);

 

iphoneX:  屏幕为曲线，需要去掉上下的 时间栏 及 虚拟盘的 高度

解决方案： 利用 u = navigator.userAgent, app = navigator.appVersion; 判断设备类型及版本进行动态固定高度的调整