WKWebView自适应大小

WKWebView字体与视口问题

最新推荐文章于 2022-08-18 15:19:33 发布

转载最新推荐文章于 2022-08-18 15:19:33 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a312272f265da43333e66fb

在使用WKWebView的时候，常常会碰到显示内容比实际css设置的样式不能正常显示，内容普遍的偏小。其实导致这样问题的根源是少了HTML5的meta标签。解决的办法可以在iOS端添加以下的内容，当然也可以让后台添加完整的HTML5的格式。如果要在iOS端指定字体的大小也是可以的（不推荐在客户端设置字体大小）。

客户端添加meta标签eg:

       NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
        
        WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
        WKUserContentController *wkUController = [[WKUserContentController alloc] init];
        [wkUController addUserScript:wkUScript];
        
        WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
        wkWebConfig.userContentController = wkUController;
        
        _myWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0,CGRectGetMaxY(headerView.frame)+10, M_S.width,M_S.height - CGRectGetMaxY(headerView.frame) - 40) configuration:wkWebConfig];
复制代码

客户端设置字体大小eg:

//创建网页配置对象
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
// 创建设置对象
WKPreferences *preference = [[WKPreferences alloc]init];
// 设置字体大小(最小的字体大小)
preference.minimumFontSize = 40;
// 设置偏好设置对象
config.preferences = preference;
// 创建WKWebView
WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.bounds  configuration:config];
复制代码