WKWebView自适应屏幕的一些经验

小弟在用webview的时候,显示的文本不会自动换行和字体显示过小,加载的图片没有按屏幕大小适配。


先来说说文本的自动换行:


html文本是直接从服务器获取的,就只有html文本,不带css格式不带js。

然后网上查找一番之后加入下面代码,并在原来的html文本基础上添加了css格式 

%@

在body后面添加  width=device-width style=\"word-warp:break-word;font-family:Arial\" 实现自动换行



    //WKWebView

    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];

    WKUserContentController *userContentController = [[WKUserContentController alloc] init];


    // 自适应屏幕宽度js


    NSString *jSString = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";


    WKUserScript *wkUserScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];


    // 添加自适应屏幕宽度js调用的方法


    [userContentController addUserScript:wkUserScript];


    configuration.userContentController = userContentController;


    WKPreferences *preferences = [WKPreferences new];

    preferences.javaScriptCanOpenWindowsAutomatically = YES;

    //设定最小字体

    preferences.minimumFontSize = 50.0;

    configuration.preferences = preferences;

    

    WKWebView *webview = [[WKWebView alloc] initWithFrame:mScreenBounds configuration:configuration];



再来就说说图片的适配:


图片的时候需要在webview加载完之后执行代码,就是在webview的代理方法里添加:


- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation

{


    weakSelf(weakSelf);


    NSString *js = @"function imgAutoFit() { \

    var maxwidth = %f;\

    var imgs = document.getElementsByTagName('img'); \

    for (var i = 0; i < imgs.length; ++i) {\

    var img = imgs[i];   \

    if(img.width > maxwidth){ \

    img.width = maxwidth;   \

    }\

    } \

    }";


    js = [NSString stringWithFormat:js, self.meetingContentWebView.bounds.size.width];


    [webView evaluateJavaScript:js completionHandler:nil];

    [webView evaluateJavaScript:@"imgAutoFit();"completionHandler:nil];



    [webView evaluateJavaScript:@"document.body.offsetHeight;" completionHandler:^(id _Nullable any, NSError * _Nullable error) {


        NSString *heightStr = [NSString stringWithFormat:@"%@",any];


        weakSelf.meetingContentWebViewHeightConstraint.constant = heightStr.floatValue + 100.0f;


    }];


}



另外说一下小弟在遇到的坑:

1、uiwebview不需要像wkwebview那样繁琐的设置就可以实现屏幕适配和自动换行,还有就是可以成功加载css格式。直接把css写在htmlString里用loadHtmlString方法,或者通过外部css样式表格式化都可以


直接在htmlString里面写:




<body>
 


   

jkghkghjkgjh


 



外部加载css格式表:



(但是外部加载需要注意的是,css文件不能放在项目的nsbundle mainbundle下面,需要把css文件复制到tmp里)

可以参考一下这个帖子: http://www.jianshu.com/p/ccb421c85b2e


2、wkwebview无法加载css格式,无论是通过外部css样式表格式化的还是直接写在htmlString里的css格式都没法显示出来,这个我也找不到原因,需要继续研究。



你可能感兴趣的:(WKWebView自适应屏幕的一些经验)