Equivalent to WKWebView for UIWebView scalesPageToFit

Question

I am updating an iOS application to replace UIWebView with WKWebView . However, I do not understand how to achieve the same behavior using WKWebView . Using UIWebView I used scalesPageToFit to ensure that the web page is displayed with the same size as the screen size (so that the full screen is displayed without scrolling).

I found this solution on the Internet, however it does not work:

 - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation { NSString *javascript = @"var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');document.getElementsByTagName('head')[0].appendChild(meta);"; [webView evaluateJavaScript:javascript completionHandler:nil]; } 

Answer 1

You can also try WKUserScript.

here is my working configuration:

 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; wkWebV = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig]; 

You can add additional configuration to WKWebViewConfiguration.

Answer 2

Echo nferocious76 response in fast code: Swift2.x version

 let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);" let userScript = WKUserScript(source: jscript, injectionTime: WKUserScriptInjectionTime.AtDocumentEnd, forMainFrameOnly: true) let wkUController = WKUserContentController() wkUController.addUserScript(userScript) let wkWebConfig = WKWebViewConfiguration() wkWebConfig.userContentController = wkUController let youWebView = WKWebView(frame: CGRectZero, configuration: wkWebConfig) 

swift3 version

 let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);" let userScript = WKUserScript(source: jscript, injectionTime: .atDocumentEnd, forMainFrameOnly: true) let wkUController = WKUserContentController() wkUController.addUserScript(userScript) let wkWebConfig = WKWebViewConfiguration() wkWebConfig.userContentController = wkUController let yourWebView = WKWebView(frame: self.view.bounds, configuration: wkWebConfig) 

Answer 3

Similar to @ nferocious76, but in Swift

 var scriptContent = "var meta = document.createElement('meta');" scriptContent += "meta.name='viewport';" scriptContent += "meta.content='width=device-width';" scriptContent += "document.getElementsByTagName('head')[0].appendChild(meta);" webView.evaluateJavaScript(scriptContent, completionHandler: nil) 

Answer 4

C # version for use in Xamarin Custom Renderer:

 string jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"; WKUserScript wkUScript = new WKUserScript((NSString)jScript, WKUserScriptInjectionTime.AtDocumentEnd, true); WKUserContentController wkUController = new WKUserContentController(); wkUController.AddUserScript(wkUScript); WKWebViewConfiguration wkWebConfig = new WKWebViewConfiguration(); wkWebConfig.UserContentController = wkUController; WKWebView webView=new WKWebView(Frame, wkWebConfig); 

Answer 5

I figured out below the soul. So that the content matches the size of the device.

 func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) { for making the content to fit with the device size let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);" webView.evaluateJavaScript(jscript) } 

Answer 6

Adding meta tags or changing the java script code did not work for me. Then I changed the frame so that it worked well, my web view was aligned and fit on the screen after I wrote the following code (Swift):

 var screenWidth: CGFloat { return UIScreen.main.bounds.size.width } var screenHeight: CGFloat { return UIScreen.main.bounds.size.height } yourWebView = WKWebView(frame: CGRect(x: 0, y: 0, width: screenWidth, height: screenHeight), configuration: WKWebViewConfiguration()) yourWebView.navigationDelegate = self yourContainerView.addSubview(yourWebView)