移动Web前端IOS系统上的各种坑

随着安卓Android系统的不断壮大，手机界苹果IOS系统似乎已日趋成为小众系统，不过除非它像当年塞班那样悄然死去，否则前端兼容还是不容忽视。今天我们就来讲讲IOS系统上的一些前端坑：

1.input不能与position:fixed的元素共存，在页面滚动且input是focus状态时，fixed的元素会跟着页面同时滚动；

2.ios中的input不能设置user-select:none;否则会input变成不可输入状态；

3.ios中a标签以外的li,div,span等元素，绑定click点击事件无效，除非在CSS中加上cursor:pointer;属性绑定事件才会生效；并且同时会出现像链接一样点击后有背景色高亮的效果；

4.body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}  

ios中是个bug，当body实际高度不足时，会遮盖底部fixed的元素*/

5. $('document').on("touchend","div",function(){}) ios上，点击有效，但如果是弹窗的话，会点击穿透后面的元素（a标签即跳转）；

    $('document').on("click","div",function(){}) ios上，点击无效；

    $('div').on("click", function(){}) ios上，点击有效，且不会穿透；
6. 跑马灯标签（marquee标签在iphone手机上样式会垮掉）

7.postion:fixed定义的底部按钮，会出现在个别iphone中渲染时，消失不见的情况：可能原因，body中内容的高度不足一屏的原因，解决方法：

html{ height: 100%;}body{ min-height:100%}

8.iphone手机的input是readonly时，还是光标还是会进入。改为disabled后会出现颜色有透明度的情况；

input:disabled{
 -webkit-text-fill-color: rgba(255, 255, 255, 1);
 -webkit-opacity: 1;
}

9.iphone6plus对flex的布局部分属性必须使用-webkit-前缀，不然样式会垮掉，目前有：

flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-between;-webkit-justify-content: space-between;