移动端常见兼容性问题及解决办法

1. 当使用transform:translate3d(-50%,-50%,0)居中弹框（div）时，在pc端，内部的文字会模糊。
   解决办法：不使用transform,使用vertical-align,给要居中的元素设置一个兄弟元素，然后让这个兄弟元素宽度为1，高度为100%，透明度为。代码如下(参考element-ui弹框)

// html

          

         


// css
.el-message-box__wrapper {
    z-index: 2001;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.el-message-box {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    width: 420px;
    border-radius: 3px;
    font-size: 16px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

2. 用position:absolute/fixed;把一个按钮固定在页面的底部，在android系统中，当调用输入法时，该按钮会被顶起
   解决办法：使用媒体查询@media screen and (max-width:400px){}当页面高度小于某一个值时，给元素一个top值

3. IOS系统调用第三方输入法时，系统无法监测到input的input、focus、change、blur事件
   解决办法:计算input值的length的长度，判断input的值是否变化

4. 不同浏览器默认margin，padding不同。

*{margin:0;padding:0;}

5. 不同浏览器的最小字体不同，有的是10px，有的是12px
   解决办法：设置字体时，不要小于12px,如果一定要小于12px，使用transform:sacle()进行缩放

6. 透明度opacity
   解决办法：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)

7. 文字两端居中text-align：justify；text-align-last：just；在移动端不起作用
   解决办法：使用 ；代替空格

8. 使用url传参时，特殊字符无法识别？如"#"
   解决办法: 传参时,使用encodeURIComponent(url)转义，解析url用
   decodeURIComponent(url)

9. 删除cookie时，domain和path必须要匹配上,否则删除不掉;设置cookie时，也建议设置domain和path

10. IOS300ms的点击延迟？

11. 函数简写在移动端部分手机上不支持？
    当我们在使用vue进行开发时，会使用函数的简写，比如生命周期函数 created(){}，但是这种写法在移动端不兼容，需要这样写 function(){}

---

未完,待续......