第1个回答 2022-07-03
苹果从iOS8增加了WKWebView以来。和UIWebView和平相处多年。
WKWebView从性能上和资源使用方面确实更胜一筹。但也存在一些很奇怪的兼容问题。
各路苹果开发者大神也总结很多经验。例如，
如何从UIWebView迁移到WKWebView，采坑分享。
WKWebView和UIWebView的性能比对等。
站在前人的基础上，终于摸索了这个控件。（本人不是苹果开发者，没有系统学习过objective-c和swift。只是运用c#语言和mono框架开发iphone的工具而已）
回到兼容的这个问题，大概是这样：
在混合app中html5单页页面，各个业务逻辑视图叫做view（例如主视图），他们的高宽都是100%沾满整个屏幕。
例如 主view和设置view。主视图的按钮触发后，主视图margin-left:-100%;，设置视图left:0px;，这样显示设置视图
在WKWebView中，强行显示了水平的滚动条，即使在禁止缩放并且锁定缩放1.0情况下。
如图，可以左右拖动视图，inspect中查看元素，html和body显示的宽度都是100%的屏幕宽度。和图主视图是同一个大侠
这下就不能淡定了，body的overflow-x失效了。
而在PC和安卓WebView中甚至是safari浏览器中都显示正常。
我尝试了很多种方式来解决这个问题。否则app也无法正常使用。
1、最快最笨的方法
将除了主视图之外的其他视图display:none，不显示也不占据空间了。切换视图时再让它显示。这个方法不好之处在于，由于要使用简单的css3动画，切换显示隐藏导致动画失效。
2、尝试设置html，body样式overflow:hidden，设置documentElement.style.overflow
无效
3、尝试从WKWebView的ScrollView对象设置禁止滚动，依然无效。
4、最终发现， 将视图view放入一个div容器，设置容器样式：width:100%;position:relative; 即可解决。切记，这个容器还不能是body，否则同样没有效果。
记录下以免忘了。