<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport">

var webview = Titanium.UI.createWebView({
    url:'index.htm',
    scalesPageToFit:true,
    Width:'auto',
    Height:'auto'
});

3 Answers

• I had a heck of a time with that, too. Here are three things I did:

  1. Because I wanted a small bit of scalability:

     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
     

  2. scalesPageToFit: false for the webview itself. I'm not sure what you're after, but I want it to flow to the window size and not have, for instance, a horizontal scrollbar.

  3. In the webview's 'load' listener:

     view.evalJS("document.getElementById('body').style.fontSize = '" + viewFontSize + "pt'");
     

     I found that was necessary to force things to display at a sane and consistent font size (stored in viewFontSize).

  I'm sure you've tried every combination of 1 and 2. Hopefully 3 might help your situation a bit.

• Here is my work-around.

  Put the following line in your "load" event listener.

  webView.evalJS("var m=document.createElement(\"meta\");m.name = \"viewport\";m.content = \"width=320, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1\";document.getElementsByTagName(\"head\")[0].appendChild(m);");
  

• EvalJS didn't work for me (caused error), but setting width to 320 like you suggested instead of 'device-width' worked wonders. I'm starting to think that the webView's width changes a few times in the process of buidling and opening the webview, as I was getting inconsistent results, with faster devices experiencing more problems while slow devices usually got the width right. Adding big scripts like jQuery had the same effect: a slowly built DOM was more reliable than a quickly built DOM.