Web app on android browser WIDTH issue

Question

So I've only experienced this issue on the Android browser so far. Basically my site works fine almost all the time (and I've not seen the problem yet on Dolphin, Opera or Skyfire) but occasionally when I reopen the Android browser from a bookmark on one of my phone's homescreens my site appears stretched horizontally, so now I only see the first 2/3 of the left hand side. Its' as though the browser just lost the CSS or the meta information while it was minimized. Here are my meta tags, and I'm using width 100% in my table styles.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="Task, Tasks, Goal, Goals, Habit, Habits, Track, Tracking, Best Habit Tracker"/>
<meta name="description" content="Top Habit Tracker!"/>
<meta name="mobileoptimized" content="0"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

This issue only seems to happen when the bookmark is clicked after about 30 min. to reopen the stock Android browser. Then, it seems browser gets the page from its cache, but still runs window onload for ajax, so I'm thinking the combination of it using a browser-cached page with (maybe?) the javascript DOM manipulations from ajax on top is something that the Android stock browser uniquely has problems with, breaking my table width outside the viewport. Or maybe the DOM changes have nothing to do with it.

If the phone is switched off, then on, and the bookmarked clicked, the stock browser reloads the page from the server, then I don't get the problem. If the browser is minimized, and the bookmark re-clicked after just 2 minutes, no problem either because the browser just re-displays itself and the last page exactly as it was left, without doing anything.

I've been thinking of some kind of hack I could throw on top to force a reload from server in the case where the page is grabbed from brower cache, or I guesss I could try turning off browser caching, but I'm wondering about the implications of doing that on images, css, load time etc. Weighing up my options... thoughts welcome.

UPDATE: Well turning off browser caching may have reduced the incidence of this issue (not sure?) but definitely didn't cure it. I'm now thinking I may be having the same issue as described in this blog post:

http://www.gabrielweinberg.com/blog/2011/03/working-around-androids-screenwidth-bug.html

UPDATE: OK nothing I've tried so far has prevented this intermittent issue in my Android stock browser. I'm going to switch my regular use of my app to Dolphin for a while to see if the issue occurs in that browser. What I've tried so far is: using meta tags to disable browser caching (I think to some extent the Android browser ignores that anyway)... changing the table width (I may try that again in a different way)... Using the solution posted at comment 14 here (dynamically creating CSS link): https://code.google.com/p/android/issues/detail?id=11961#c14 and lastly I've tried appending Datetime ticks to the URL in an effort to alleviate caching, that hasn't worked either.

More useful info here: http://f055.tumblr.com/post/6364300769/viewport-bugs-in-android-browser

Answer 1

Not sure if this will help u - but this is what I did for my mobile apps

 This is the only meta I use...
 <meta content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">


 <div class=general>

 All Ur Content in here etc - or next div etc...
 Below the margin-left: 1% and margin-right: 1% formats your div to your width
 So if ur browser is upright or wide - it is always 1% border width and fits screen.
 Don't use any table width=800 or anything - control it with the 1% margins

 </div>

 .general { 
 font-family: Verdana; font-size: 10pt; font-weight: normal;
 position: relative;
 background-color: #fafafa;
 padding: 8px;
 margin-top: 4px;
 margin-left: 1%;
 margin-right: 1%;
 border: 1px solid #000;
 border-radius:5px;
 }