Mobile Note

发表于 | 分类于

移动端开发踩坑合辑

1、-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 去掉ios设备点击时的半透明背景，想要禁用这个背景，设置颜色的透明度设置为0。
2、只要用到了position，父级就是根据网页大小，就是浏览窗口大小，所以要想让DIV宽度不超出body只能给DIV设置绝对大小width：XX px。
3、多行省略的一个样式-webkit-box-orient: vertical在webpack打包，执行npm run build之后会消失，查了资料要把：
1
2
3
4
5
6
.itext-overflow {
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

写成：

1
2
3
4
5
6
7
8
.itext-overflow {
    display:-webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp:2;
    overflow:hidden;
}

可参考：-webkit-box-orient不见了， webkit 和 autoprefixer 的坑。

4、在绝对定位(absolute|fixed)的弹窗里，最好不要用-webkit-overflow-scrolling: touch; 在iphoneX里会显示成弹窗的背景颜色缺失。
5、onpopstate的使用
1）应用场景：用户在下过订单但放弃支付时，选择放弃跳转带支付订单页面；
2）产生原因：体现在微信中，一部分低端机会在侦听onpopstate事件后马上触发一次onpopstate事件，查阅资料发现这属于webkit内核的游览器对onpopstate事件支持的缺陷。
3）解决方法：初次加载避开执行。
6、去掉移动端输入框的内边狂阴影：

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

1
2
3
4
input, textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}
7、修改input的placeholder样式
1
2
3
4
5
6
7
8
input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #aab2bd;
    /* placeholder字体大小  */
    font-size: 12px;
    /* placeholder位置  */
    text-align: right;
}
8、手机端复制文本，选用clipboard框架（vue），但是要注意不能异步获取要复制的内容，且不兼容华为荣耀8。
9、iPhoneX 显示iframe嵌入的页面，除了给外侧容器设置position:absolute;bottom:env(safe-area-inset-bottom);，还要给iframe自身设置height:calc(100% + env(safe-area-inset-bottom));确保没有底部安全区域。

PC端兼容合辑

1、对象的属性
1）对象的属性为关键字：如果为了代码的可读性考虑，可以在属性名上加引号，防止低版本IE报错（IE7）
2）在定义对象时，对象的唯一一个属性或者最后一个属性最好不要加逗号，因为多写逗号在低版本的IE里会报错。
2、请求头

在给请求添加自定义请求头时，一定要让后端配合设置Access-Control-Allow-Headers，使其包含我们自定义的请求头参数名称，否则会有问题。