移动端开发经验总结
1. ios上，⽤户点击输⼊框，键盘不响应
问题重现：财酷3.0，某个页⾯的某个输⼊框，点击输⼊，键盘不响应，⽽其它页⾯键盘响应正常。
问题排查：经排查，是因为该输⼊框绑定的聚焦事件中，执⾏了⼤量的js操作，阻塞了进程，导致键盘未及时响应，进⽽不响应。document有安卓版吗
解决⽅法：将该绑定的聚焦事件中的js操作设置⼀定的延迟时间，不阻塞键盘响应即可。这⾥的代码仍需优化，聚焦时js操作的时机是否合适？
2. ios/Andriod上，js中的alert, confirm,prompt不可⽤
问题重现：财酷4.0开发中，发现js中使⽤的上述⽅法不可⽤，在安卓中甚⾄会导致进程卡顿
问题排查：经排查，是因为webview中默认不可⽤
解决⽅法：natvie端重写这个3个⽅法⽀持，或者调⽤系统原⽣⽅法即可
3. 安卓上，css画圆发⽣变形
问题重现：css使⽤border-radius画圆时，postcss将宽⾼像素转成rem，在安卓上⼩圆发⽣变形，显⽰为椭圆（在安卓中会有此问题，ios正常）
问题排查：安卓上，px转rem后，虽然宽⾼均相同，但是显⽰出来的圆形宽⽐⾼多1px
解决⽅法：使⽤内联样式来写宽⾼，这样就不会被转成rem了。
4. iPhone 输⼊框失焦延时
问题重现: 输⼊框聚焦后弹出软键盘，未输⼊信息和未关闭软键盘，直接点击回复按钮弹出alert提⽰框，不同iphone版本出现以下两种情况：
1、软键盘未关闭还能编辑，弹出框卡死不能点击。
2、软键盘关闭，关闭alert弹出框后出现软键盘打开⼜关闭？
问题排查：经排查，输⼊框失焦和alert关闭会有⼀定的延时，两个混在⼀起导致。
解决⽅法：弹出alert提⽰框前添加延时，让输⼊框失焦完成后再弹出提⽰框。
5. iPhone上，锁屏⼏分钟之后，之前页⾯的能够点击现在不能点击了，页⾯出现了假死。
问题重现：iPhone上ios11.3系统，锁屏之后，之前页⾯的能够点击地⽅现在不能点击了，页⾯出现了假死。
问题排查：ios11.3⽀持了Web API：允许对事件⽀持被动模式，减少滚动屏幕的性能损耗和奔溃，document的touch事件监听添加passive 配置，即是：{passive: true}，会永远不调⽤event.preventDefault()，导致页⾯不能点击，出现假死。
解决⽅法：使⽤新的fastclick.js⽂件就可以解决。
6. 安卓⼿机上，点击页⾯的输⼊框获取焦点，软键盘拉起，但是该输⼊框的位置往
上移很远。
问题重现：安卓⼿机上，点击页⾯的时候获取焦点，软键盘拉起，但是该输⼊框的位置往上移很远，页⾯效果很差。
问题排查：安卓设计的时候，webview和软键盘不在同⼀个页⾯，前端这边监听不到页⾯resize事件，没有调
⽤document.activeElement.scrollIntoViewIfNeeded()，把那个对应的输⼊框位置往下移
解决⽅法：安卓这边重新设计webview和软键盘在同⼀页⾯，拉起键盘的时候，使webview变⼩，我们这边设置浏览器窗⼝监听，具体代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。