Mac联机调试移动端页面方法 和 移动端IOS遇到的兼容性问题

移动端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...