移动端兼容问题总结

1. 设计稿2倍图 实现绝对1px的边框（0.5px）安卓系统 ios7以下不⽀持0.5px

• 解决：缩放、写1px的阴影

1.scale(缩放)

//只需要上边框
#div1::after{
  display: block;
  width: 100%;
  height: 1px;
  background: #cccc;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
//全部边框都需要
#div2::after{
    display: block;
    width: 199%;
    height: 199%;
    border: 1px solid #333333;
    content: '';
    transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    position: absolute;
    top: 0;
    left: 0;
}

2.box - shadow(边框阴影)

div{
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}

• 注意：当父元素下的子元素绑定了点击事件时，需要把该元素定位z-index向上浮出;

2. 低版本安卓手机不支持背景色渐变，在单独写一个背景色

#container{
    background-color:#ff7e33;
    background-image:linear-gradient(45deg,#ff5303,#ff9143);
}

3. 低版本⼿机 尤其是4.+系统的不⽀持es6写法，vconsole会报错script error ，但⽆法查出具体错误 需要加垫⽚babel-polyfill
4. 点击输入框拉起键盘 输入完成后页面高度无法被撑开（安卓手机），重新获取页面高度并赋值
5. 图⽚上传，不同⼿机的input file展现形式不同，ios系统⼀般会出现拍照和相册两个选项，安卓⼿机拍照、相册选择有时只出现⼀ 项，有时根据系统不同会展示其他项，12306的webview不⽀持input file 会出现闪退的情况
6. ios 11系统input光标错位（系统本身原因）

• 解决⽅法：www.jianshu.com/p/f9832efa0…

7. ⻚⾯滑动吸顶或吸底效果，⼿机qq的webview⾥⻚⾯⽆法拉动，需要阻⽌⻚⾯的默认动作(event.preventDefault())
8. ios系统的input框会有⼀个隐形 需要去掉-webkit-appearance: none;
9. 有的⼿机input placeholder⽆法垂直居中,可以设置input⾼度⼩⼀点,然后上下加padding,⽹上的解决⽅式line-height：normal
10. ios系统⾳频⽆法⾃动播放，需监听⽤户有操作之后⼿动触发