h5中Android和ios的适配问题

• ios中上下拉动滚动条时卡顿、慢
  Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

body {
    -webkit-overflow-scrolling:touch; 
    overflow-scrolling: touch;
}

• 针对部分ios中flex布局混乱

.div{
display: flex;
}
.div-item{
flex:1;
}

改成

.div {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.div-item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}

• 兼容部分安卓手机的input获得焦点时，把底部的定位按钮顶上来问题

  
  image.png

-- 解决办法

var winHeight = document.documentElement.clientHeight;
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
function monitorBtn() {
var reHeight = document.documentElement.clientHeight;
    if(isAndroid){
        if (winHeight - reHeight > 50) {
          document.getElementById('dingweiBut').style.position = 'static';
        } else {
          document.getElementById('dingweiBut').style.position = 'fixed';
        }
      }
}
    export default monitorBtn;

1.先获得页面的高度，当高度变化时，判断是否大于一定的高度（此项目针对底部的按钮，按钮高度为50px左右，所以判断是否大于50）
2.当大于50时，给当前元素的定位更改为'static'
3.否则的话，让其定位在底部
4.然后在componentDidMount生命周期中监听

componentDidMount() {
    if (document.getElementById('dingweiBut')) {
      window.addEventListener('resize', monitorBtn);
    }
}

5.在组件卸载时移除监听

componentWillUnmount() {
    window.removeEventListener('resize', monitorBtn);
}