WKWebView h5 页面显示不全问题

首先先来看一下效果图如下所示:

1.png

2.png

图 1 下面的分享按钮只显示出一点, 当时想出现这样的 bug 无外乎两点 1.h5 那边设备兼容问题 2.ios 这边显示问题, 问了 h5, 说是直接加载底部的 CSS 样式, 安卓那边显示 OK, 最后看了 h5 的代码也没发现问题, 最后决定尝试自己试着解决一下, 最后发现原因就是没有正确设置 UIScrollView 的高度没有设置正确导致 wkwebView 内容显示不完整, 加上下面这句一般就可以解决问题:

self.edgesForExtendedLayout = UIRectEdgeNone;

究其原因详细如下:

在 IOS7 以后 ViewController 开始使用全屏布局的, 而且是默认设置属性 edgesForExtendedLayout(它是一个类型为

UIExtendedEdge 的属性, 指定边缘要延伸的方向) 是 UIRectEdgeAll, 四周边缘均延伸, 就是说,

如果即使视图中上有 navigationBar, 下有 tabBar, 那么视图仍会延伸覆盖到四周的区域.

因为一般为了不让 tableView 不延伸到 navigationBar 下面, 属性设置为 UIRectEdgeNone 即可

同时如果导航栏有其他杂色只需要设置导航栏的透明度即可 self.navigationController.navigationBar.translucent = NO;

来源: http://www.jianshu.com/p/e376f352e282