H5前端IOS爬坑(二)

在进行前端的编写过程中,会遇到各种各样的神奇的适配问题,有的IOS没问题,Android却有问题; 有的却正好相反,本文就记录了一种在IOS上才有的坑。
第二季

灵魂漂移问题

事件描述
当页面上有input框时,如果点击收起键盘,页面的实际布局虽然没有什么问题,但是真正的响应布局任然停留在小键盘弹出时的位置。导致形式上的点击按钮失效。

类似还有双击自动滚屏时,滚屏停止之后。点击按钮无效的问题。。

解决方案

键盘收起时,强制设置 document.body.scrollTop = document.body.scrollHeight 即可

点击穿透问题

该问题出现在一个拖拽功能上。 当时想要只点击右侧才是拖拽,点击左侧就是正常滑动效果。
偷懒直接在左侧增加一个遮罩层,然后在 IOS 测试,完美~(才怪)。
上线后发现安卓无法进行正常滑动操作,全都是拖拽效果。

原因:ios下,滚动时不会触发scroll事件,但会触发touchmove。当停止滚动后会出发scroll

IOS下无法点击按钮

给一个按钮添加 click 事件。上线发现安卓一切正常,有些ios却无法响应

原因: 一些情况下对非可点击元素监听click事件,ios下不会触发,css增加cursor:pointer就搞定了..

其他

  1. IOS下所有的点击都会有300ms的延迟, 所以可以用 fastclick 插件优化下
  2. IOS 原生 scroll -webkit-overflow-scrolling: touch 可以拖拽最底层问题。。。 无解 用其他插件吧
  3. IOS 微信jssdk 返回 base64 图片格式无法识别需要转换问题 jgp -> jpeg 即可
  4. IOS 时间只认识 2006/01/02 不认识 2006-01-02
咸鱼也要有梦想,万一实现了呢
0%