美文网首页iOS开发(OC)
WKWebView加载HTML代码自己添加样式适配屏幕

WKWebView加载HTML代码自己添加样式适配屏幕

作者: X勒个F | 来源:发表于2016-07-27 14:59 被阅读4807次

    由于后台返回的HTML代码直接显示在手机上不好看,所以只能添加样式来适配屏幕,下面的方法可以调节文字和图片大小来适配屏幕。

        - (NSString *)reSizeImageWithHTML:(NSString *)html {
            return [NSString stringWithFormat:@"<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'><meta name='apple-mobile-web-app-capable' content='yes'><meta name='apple-mobile-web-app-status-bar-style' content='black'><meta name='format-detection' content='telephone=no'><style type='text/css'>img{width:%fpx}</style>%@", SCREEN_WIDTH - 20, html];
        }
    

    遵循WKNavigationDelegate,在WKWebView加载完数据后实现某些操作。比如要调整scrollow内容高度

    - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
        __block typeof(self) weakSelf = self;
        [webView evaluateJavaScript:@"document.body.scrollHeight" completionHandler:^(id _Nullable value, NSError * _Nullable error) {
            CGFloat height = [value floatValue];
            CGRect rect = weakSelf.webView.frame;
            rect.size.height = height;
            weakSelf.webView.frame = rect;
            weakSelf.backgroundView.contentSize = CGSizeMake(0, CGRectGetMaxY(self.webView.frame));
        }];
    }
    

    同时要求webview不能缩放,内容不能在webview内上下左右滚动,就要设置

     _webView.scrollView.delegate = self;
     _webView.scrollView.scrollEnabled = NO;
    

    这样以来,在离开此页面时程序就会崩溃。
    这时需要在页面销毁时做如下操作

    - (void)dealloc
    {
        self.webView.scrollView.delegate = nil;
    }
    

    我是在viewDidLoad里add了webview设置代理
    就在dealloc里将代理置空。
    如果在viewWillAppear里设置,请在disAppear里置空。
    didAppear同理。

    相关文章

      网友评论

        本文标题:WKWebView加载HTML代码自己添加样式适配屏幕

        本文链接:https://www.haomeiwen.com/subject/hrmojttx.html