WKWebView 加载HTML，屏幕自适应问题

电商项目，在做商品详情的时候。关于产品介绍，是通过得到后台的html代码进行显示。那么html代码的尺寸和我们手机的尺寸会不一样，那么这个时候就要做屏幕的自适应。

第一种方法：直接替换里面的宽度值，但是这个方法有弊端。万一后台给我们的html代码宽度是可变的呢，那这就不管用呢

 // html加载
   NSString *heder = @"html代码";
  // 改变html的宽度让自适应
  NSString *htmlString = [heder stringByReplacingOccurrencesOfString:@"300" withString:[NSString stringWithFormat:@"%.f",屏幕宽度]];
   [self.webView loadHTMLString:heder baseURL:nil];

第二种方法。这个方法是我从网上找到的，但做了一点改动。也可以说自己解决了一个坑
别人的代码，这么运行没有什么效果。（我自己测试是没有效果，不知道广大同胞是不是同样）。那么怎么办呢，其实很简单，那就是改js代码。把 width=device-width 改成 width=100% 这样就可以呢。所以看不懂js代码也很苦逼的

- (WKWebView *)webView {
    if (!_webView) {
        _webView = [[WKWebView alloc] init];
        //以下代码适配大小
        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;
        
        _webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig];
        [self.view addSubview:_webView];
        _webView.navigationDelegate = self;
    }
    return _webView;

那么自适应高度呢,首先遵循代理

 _webView.navigationDelegate = self;

然后执行他的代理方法

#pragma mark —— WKNavigationDelegate
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    [webView evaluateJavaScript:@"document.body.scrollHeight;" completionHandler:^(id _Nullable any, NSError * _Nullable error) {
           NSString *heightStr = [NSString stringWithFormat:@"%@",any];
           [self.webView setHeight:heightStr.intValue];
          [self.tableView reloadData];
    }];
}

或者试用此方法
https://www.jianshu.com/p/20cea397cd11

最后编辑于：2019.02.25 12:30:20