Search code examples
cordovaphonegap-pluginswkwebviewwkwebviewconfigurationcordova-4

programmatically change WKWebView content size

I added a WKWebView subview into a PhoneGap / Cordova 4.0+ app (via cordova-plugin-wkwebview-engine) and used programmatic AutoLayout constraints to get the WKWebView to size the same as the MainViewController's view.

When I view the bounds of the WKWebView, it matches the MainViewController view's bounds.

But using Javascript to inspect the content size, specifically script that looks like:

var body = document.body; 
var html = document.documentElement;
Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.offsetHeight);

This returns a height that's actually about 1/2 to 2/3rds of the WKWebView bounds height (on an iPad Pro simulator I'm setting bounds height to 1024.0 but the Javascript reports a content height of only 735.0). And I'm only displaying half of the non-resizing Vue.js content I'd love to display.

Since I can't show the actual content I'm working with (NDA fun!), I actually noticed the problem happens with any URL I pass into WKWebView within PhoneGap/Cordova. Here is what apple.com looks like in my app: Bottom Edge is Cut Off

And here is what it should look like, the correctly sized version, in Mobile Safari (running in the simulator):

More Being Displayed

You can see the top bar items are differently spaced (on the desktop they're supposed to be indented from either side of the window somewhat) and there's more revealed in the bottom edge, because the web view's internal height is taller.

To fix my problem, I've done everything from move the WKWebView instantiation from viewDidLoad out to viewDidAppear, and also tried "hard coding" a static iPad Pro-sized framesize being passed into [WKWebView initWithFrame:], but content size remains at 735.0. This same content renders beautifully (and correctly) both in the Simulator's Mobile Safari and in Desktop Safari.

How can I force WKWebView's content size to match the bounds of the parent view?

If you'd like to see this bug in action on the iPad Pro simulator, I have a public github repo at https://github.com/dautermann/phonegap-air. Be sure to fetch the "demonstrate-issue" branch.

Solution

  • I think the issue you have is not directly related to the WebView. It is related to the fact that for the backward compatibility reasons "old" applications run on iPad Pro do not get "native resolution" and use iPad 1024x768 instead.

    The way to persuade Apple that you are aware of the iPad Pro and its native resolution is to specify some LaunchScreen storyboard. Yes, this is a bit surprising way but this is what it is (see for example https://forums.developer.apple.com/thread/17193). If I modify the OTAApplication target in your test project on GitHub and specify standard CDVLaunchScreen as Launch Screen File everything works fine for me.

    Update

    According to Force iPad Pro to full resolution without Launch Screen if you use XCode 8, it might be enough to just specify Launch Image of proper resolution for iPad Pro. Haven't tried it though.