摘要：移动端失效需求点击一个，让某一个聚焦并弹出虚拟键盘。安卓可以聚焦，但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦，也不会弹出虚拟键盘所以我的这边的实践结论是，如果希望在页面初始化过程中，让自动聚焦并弹出虚拟键盘。
移动端IOS遇到的兼容性问题 和 Mac联机调试方法
有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，这个联机方法记录一下。
平时的移动端业务开发中，到最后总会发现一些IOS兼容性问题，这里就把自己遇到的问题记下来，避免将来再踩坑吧
Mac联机调试移动端页面方法1.打开Mac的Safari浏览器，点击偏好设置
屏幕快照 2018-11-29 08.53.26.png
2.点击「高级」一栏最下方 --> 勾选「在菜单中显示"开发"菜单」
3.最后把 iPhone 或者 iPad 通过数据线链接 Mac 电脑，点击屏幕顶部的「开发」菜单
4.如果顺利，应该「开发」菜单里可以看到iPad或者iPhone的信息，如果你在移动端有打开网页，点击就能唤出一个Safari浏览器的控制台调试器
注意：移动端和网页端的页面都用Safari浏览器打开
屏幕快照 2018-11-29 09.30.59.png
使用方法就跟PC端的调试器类似
移动端IOS遇到的兼容性问题IOS兼容性问题
1.使用微信内置地图查看位置接口openLocation，Android系统能正常打开地图，IOS提示invalid coordinate
经纬度必须用浮点型，传字符串会报错,在地图业务遇到的
2.overflow:auto 滑动卡顿
这个比较常见，添加 -webkit-overflow-scrolling: touch;
启动硬件加速，所以滑动会变流畅。
对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。
3.移动端focus失效
https://segmentfault.com/q/10...
需求1：点击一个button，让某一个input聚焦并弹出虚拟键盘。（可以实现）
需求2：页面记载时，自动focus，并弹出虚拟键盘 （无法实现）
需求1：
在button的click里，调用input.focus
this.$refs.btn.addEventListener("click",() => {
this.$refs.inputDom.focus()
})
需求2：
iOS是不支持你用js编程的方式调用focus的，如果没有事件就不能聚焦
所以设置autofocus="autofocus"没用；
直接在页面加载时，调用input.focus()也没有用，因为这属于js编程的方式聚焦。
那么，我们想一想，如果必须要触发事件的话，我们想需求1的做法一样，在页面加载时，直接调用btn.click。模拟用户点击button的行为，来触发input的聚焦行不行呢？
this.$refs.btn.addEventListener("click",() => {
this.$refs.inputDom.focus()
})
this.$refs.btn.click()
实践的结果是不行，这是在三个平台的表现情况：
PC端： 可以聚焦，不会弹出虚拟键盘，（当然本来也没有小键盘）。
安卓： 可以聚焦，但是不会弹出虚拟键盘 （说明安卓机的表现也是异常的）
IOS： 无法聚焦，也不会弹出虚拟键盘
所以我的这边的实践结论是，如果希望在页面初始化过程中，让input自动聚焦并弹出虚拟键盘。这个需求是没法是做的。 （写出来是个人分享，如果我说的不对，一定留言哈，感谢）
4.移动端软键盘，「换行」转「搜索」
需要用form包裹，并且设置action
直接设置type="search"的话，安卓可以正常显示,IOS没有效果
5.iOS上的固定定位有bug
iOS上使用position:fixed可能有问题
我现在是避免使用fixed，有其他布局或者用absolute
6.iOS中input键盘事件keyup、keydown、keypress支持不是很好
用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应
这个我是通过换input事件来处理
7.点击iOS上input框，不弹出虚拟键盘
如果仅仅是不弹出键盘的话
在focus事件中document.activeElement.blur()
或者设置readonly
我这个需求是希望聚焦，同时不要弹出虚拟键盘。最后改用组件库vant里的组件来做了。
8.移动端点击300ms延迟 和 移动端点透问题
低版本浏览器用faskclick就行，高版本浏览器取消300ms延迟了
https://github.com/ftlabs/fas...
https://juejin.im/post/5b3cc9...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99535.html
摘要：我个人比较推荐的方法是或者安卓手机的这种方式，比较简单方便快捷，然后根据具体的环境再选择更为合适的调试方法。 本文首次发表于本人的个人博客：http://cherryblog.site/ ，欢迎大家到我的博客查看更多文章~ 前言 在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差...
摘要：博主之前已经推荐了一款神器下面，就总结一下移动端遇见的坑。解决原理虚拟键盘弹出时将元素设置为，虚拟键盘消失时候设置回来。解决方案由于虚拟键盘出现并未抛出事件，而检测或者事件，皆会有一定延迟，会出现闪烁现象。 做过很多移动端的项目，在开发调试过程中，一款好的调试工具会让效率大大提高。博主之前已经推荐了一款神器：http://web.jobbole.com/87587/ 下面，就总结一下移...
摘要：移动端调试困难很多时候，我们在进行移动端开发时，都是先在端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。 移动端调试困难 很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化...
阅读 2014·2021-11-11 16:54
阅读 2087·2019-08-30 15:55
阅读 3589·2019-08-30 15:54
阅读 372·2019-08-30 15:44
阅读 2208·2019-08-30 10:58
阅读 406·2019-08-26 10:30
阅读 3031·2019-08-23 14:46
阅读 3167·2019-08-23 13:46
