移动端 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=”javascript:return true”>
<input ref=”inputDom” type=”search” placeholder=” 搜索 ” v-model=”searchValue” @keypress=”keypress” />
</form>
需要用 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…