mac怎么看网页html5,Mac 如何真机调试webApp内嵌H5网页,及处理一个小Bug

设计模式大概总结了前面的7个，熟练掌握以后，工作中的问题基本上都可以处理，而且对后面看vue或者React的源码也有不小的帮助，这次的问题是 webApp如何进行真机调试

前提是h5移动端界面在iPhone手机上的异常表现，这边以我遇到的问题为例。移动端采用vue结合vw 做了适配，界面展示在iOS 和安卓 到是没有什么问题，但是iOS存在一个问题，就是界面在iphone中上下滑动时总会有一个白边，造成界面滑动不流畅，尽管iOS端已经设置了全局的webview 的bounce 为false, 问题依然存在

调试

mac 一台,iphone手机一部, 数据线一根

1. 打开电脑上的safari 浏览器 ，偏好设置-->高级-->选择【在菜单栏中显示开发菜单】

2.将手机通过数据线连接至电脑，打开手机， 设置--->safari 浏览器--->高级

然后用手机上的safari打开要调试的网页

3. 在Mac电脑上 选择【开发】---> 【连接到电脑的手机】--->后面会显示手机上打开的需要调试的网页，我这里iPhone已经移除，所以只显示了电脑名称

Bug描述

H5页面在iPhone上下滑动时，总会出现白边，且webView设置 debounce= false 无效，如图：下拉时红框位置 会出现白边，上滑到底，底部同样会出现白边

问题主要表现

1. 安卓手机一切正常

2. Iphone上滑动页面时，整个Html跟着滑动，造成上下出现白边，体验稍显卡顿

解决方案

最终采用了给body元素加上，position：fixed 及 overflow：hidden; 暂时解决这一问题。

总结体验了如何真机调试iPhone中的H5界面

safari 和 App中的webView表现似乎是一致的

需要找找safari的开发文档去了解问题出现的真正原因

我是喜妹子，每篇文章尽量不超过1000字----欢迎关注，点赞，转发，评论。。。