Web移动端兼容问题

通用

-webkit-tap-highlight-color: rgba(0,0,0,0);触摸时颜色

css

android:

• android4.4一下的不支持flexbox，需要用旧版flexbox;

 display: -webkit-box; /* display: flex; */
-webkit-box-pack: center;  /* justify-content: center; */
-webkit-box-align: center; /* align-items: center; */
-webkit-box-orient: vertical; /* flex-direction:column; */
-webkit-box-flex: 1.0; /* flex:1; */
-webkit-box-lines: multiple; /* flex-wrap: nowrap */

ios:

• 父元素display: flex子元素绝对定位后，父元素的align-items:center会失效
• -webkit-appearance: none; 清除输入框内阴影
• animation 和translate 同时使用，需指定animation 的延迟，要大于 .5s。animation: pop-right 3s .5s infinite;，否则会失效
• ios css3 加-webkit-前缀，系统7.0旧版本不兼容
• -webkit-overflow-scrolling: touch; 解决ios overflow:scroll;滚动卡顿
• background: url('./bg.jpg') 0 no-repeat/cover 不支持这种写法，cover跟在no-repeat后面

js

• 解决移动端键盘弹起遮住输入框的问题

window.addEventListener("resize", function () {
    if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
        document.activeElement.scrollIntoView();
    }
})

• 阻止页面滚动

// 给蒙层阻止事件传递，蒙层是绝对定位后遮住body的
document.querySelector('#mask').ontouchmove = function(e){ 
    e.preventDefault();
}

ios

• scroll事件不会实时触发，而是停止滚动后触发。ontouchmove 和 onscroll 一起使用

document.body.ontouchmove = function(){}
document.body.onscroll = function(){}