Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to solve the problem that iOS uses WKWebView to load HTML5 and does not display screen width. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Recently in the project, our product details page is a picture label returned by the background. We need to write a HTML5 tag to integrate it (equivalent to rewriting a HTML page)

Ok_hand: there's nothing I can do about it. I'll write a label by myself. It shouldn't be difficult. Hee.

Dispatch_async (dispatch_get_main_queue (), ^ {if (self.detailModel.details) {/ / here is a simple loading H5 NSString * header = @ "body,html {width:100%; height: 100%;} * {margin:0;padding:0;} img {max-width:100%;display:block; width:auto; height:auto;}"; NSString * html = [NSString stringWithFormat:@ "% @% @", header,self.detailModel.details] [self.webView loadHTMLString:html baseURL:nil];}})

Well, then I wrote it in UIWebView first. After adjusting it for a long time, it didn't occupy the width of the screen. It was annoying. Want to hammer yourself twice. Looking for information can be solved by setting an attribute, Hao Hi!

It was like this before the property was set.

Use [_ webView setScalesPageToFit:NO]; this property is fine, and the function of this property is to zoom to the screen size. Well, UIWebView solved it with this.

/.. Come to an end

But what about WKWebView? Because it usually takes a little time for H5 to load and also wants to add a progress bar, the experience will be better. When H5 is not finished loading, the user's sliding page will get stuck (because scrollerView's ContentSize is still uncertain). So it is common to set the ContentSize of scrollerView after loading. Don't talk much nonsense and go straight to the code.

-(WKWebView *) webView {if (! _ webView) {_ webView = [[UIWebView alloc] initWithFrame:CGRectMake (0, iPhone5sHeight (375+135*PXSCALEH+285*PXSCALEH), screenW, screenH-50)]; WKWebViewConfiguration * wkWebConfig = [[WKWebViewConfiguration alloc] init]; WKUserContentController * content = [[WKUserContentController alloc] init]; / / Adaptive screen width 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]; / / add the method called by js with adaptive screen width [content addUserScript:wkUserScript]; wkWebConfig.userContentController = content; _ webView = [[WKWebView alloc] initWithFrame:CGRectMake (0, iPhone5sHeight (375+135*PXSCALEH+285*PXSCALEH), screenW, screenH-50) configuration:wkWebConfig]; _ webView.UIDelegate = self; _ webView.navigationDelegate = self;} return _ webView;}

It would be nice to fit in here.

This is how to solve the problem that iOS uses WKWebView to load HTML5 without displaying screen width. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.