移动端兼容问题(碰壁集锦)

1.input框在调用focus事件

在安卓上可以直接调用focus事件

在ios系统上必须要触发事件才能够触发

2.input框样式排版

在进行这种输入框的排版时

如果正常调试排版 在不同的机型上会有不同的显示效果， 不是高一点就是低一点不整齐

解决方案: 使用position 定位前边的'真实姓名' 给input框 让出位置即可

3.flex布局flex-wrap属性

使用flex-wrap属性时

安卓: 可以

ios: 对flex-wrap这个属性认可，但是对flex:1不感冒

pick1: flex 是 flex-grow、flex-shrink、flex-basis的缩写

解决方案

/* 正常 */
.box {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    .smallbox{
        flex: 1;
    }
}
/* 改为 */
.box {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    .smallbox{
        -webkit-flex: 1 1 50%;
         flex: 1 1 50%;
    }
}

4.webpack中autoprefixer 兼容各大浏览器css加前缀之css样式渐变

在本地项目中显示正常渐变，生产环境经过autoprefixer编译后失效

定位问题: webpack autoprefixer 可能不识别linear-gradient渐变属性 所以没加前缀 导致颜色失效

方案1: 既然你不行，我自己来

经测试 out

方案2: 另辟蹊径

写一个css 外部引入index.html中 使用link 这样不会被autoprefixer编译

经测试 out

方案3: 勇往直前

在百度过程中，看了一篇关于autoprefixer的文章

细化定位: 语法差异

5.页面中禁止被选中

想到user-select:none属性,可以使页面中禁止被选中

安卓: 可以, input输入框也可以输入

ios: input输入框也不可以输入，全部禁止

解决方案:

*:not(input) {

    user-select: none;

}

6.input样式

安卓跟ios默认的input框样式不是不同的

加上-webkit-appearance: none;属性

input输入框就会像Android上一样正常显示。

7.移动端定位问题

在使用position定位时 top/bottom, right/left

都要写全了如果没写 在ios中默认为0 会造成样式问题

嗖嗖嗖~ 传送门