iOS开发

WKWebView内容宽度自适应

2018-09-17  本文已影响229人  chasitu

最近因有个功能UI比较复杂,iOS原生编写比较麻烦,所以想改用HTML文本标签加载的形式编写,前期很顺利,测试的时候发现文本的宽度并没有像正常HTML5一样自适应

问题:WKWebView内容宽度自适应

解决: WKWebView加载时添加Header标签相关配置进去

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
        NSString *jSString = [NSString stringWithFormat:@"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=%f'); document.getElementsByTagName('head')[0].appendChild(meta);",MainScreenWidth-30];
        WKUserScript *wkUserScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
        [wkWebConfig.userContentController addUserScript:wkUserScript];
        _wkwebView = [[WKWebView alloc] initWithFrame:CGRectMake(15, 44, MainScreenWidth-30, 200) configuration:wkWebConfig];

注:以上代码里面的该部分代码为<屏幕宽度减去30像素>

MainScreenWidth-30

最后重新加载wkwebview,底部左右滚动条再也不出来了,
完美└(o)┘

上一篇下一篇

猜你喜欢

热点阅读