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

2019-06-05代码教程3460
  • 详情内容
  • 留言点评

随着安卓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;

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看