Titanium mobile: Dynamically scaling webview

titanium logo

Me and my collegue were developing an app using Titanium mobile. On iOS we had a problem with Webviews adding some extra empty white space to the bottom of the Webview. We fought with this problem couple of hours and now I would like to share the solution we found so you could save those hours that we spent. So how to scale Webview height dynamically?

First add a viewport metatag to the html content of the Webview like this:

<meta name="viewport" content="width=device-width,user-scalable=no">

Add also event listener to load event.

webview.addEventListener('load', function (e){
   e.source.height = e.source.evalJS("document.height;");
});

This will get the height of the html content and set that height for the Webview. Your Webview should now scale dynamically. Please leave a comment if you encounter any problems.

I'm the author of this article. Please leave a comment or send me message on twitter. You can find more information about me on the front page.
Bitcoin donations: 16tgFebT2SBCpxVrm4F6j2GYLQW64ChN1i

Add new comment