I'm wondering about how to set the 'intial-scale' so that on various devices the width of the site fits the width of the screen when you 1st load it.
My website
It works just fine on regular browsers but I had weird behaviour with text inflation + iframe being half blank on mobile device browsers. The viewport meta tag is helping me. This is working ok now.
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.3, maximum-scale=1.0, minimum-scale=0.3" />
<meta name="apple-mobile-web-app-capable" content="yes" />
At the moment if the initial scale is big and the site starts out zoomed in then the portion of the iframe within the site that is off screen is never drawn when you zoom out. If have it set with a small initial scale so that it starts way zoomed out you can zoom in and it all works OK.
<meta name="apple-mobile-web-app-capable" content="yes" />
What fixed my problems was actually removing all those meta tags above and adding this line to my CSS:
html * {max-height:1000000px;}
This fixes the font inflation/boosting that was making my website not work on mobile in the 1st place.
Without any of those viewport meta tags, all browsers I tested* will automatically zoom to the page width.
*default, Chrome and Firefox on android.