Thus, I only experienced this problem in the Android browser so far. Mostly my site works fine almost all the time (and I have not seen the problem in Dolphin, Opera or Skyfire yet), but sometimes when I open the Android browser again from a bookmark on one of my phone screens, my site looks horizontally stretched, so now I see only the first 2/3 of the left side. Its "as if the browser simply lost CSS or meta-information while it was minimized. Here are my meta tags and I use 100% width in 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 problem only occurs when you click on a bookmark after about 30 minutes. to open the Android browser again. Then the browser seems to get the page from its cache, but it still launches the onload window for ajax, so I think that combining it using a browser-cached page with (maybe?) DOM javascript manipulations with ajax on top is something- the fact that the Android Android browser definitely has problems violating the width of my table outside the viewing area. Or perhaps the changes to the DOM have nothing to do with it.
If the phone is turned off, then turned on and clicked on a bookmark, the stock browser reloads the page from the server, then I will not have a problem. If the browser is minimized and the bookmark is clicked again after only 2 minutes, there is no problem either because the browser simply re-displays itself and the last page is exactly like it, doing nothing.
I was thinking of some kind of hack that I could pounce on top to make it reload from the server in case the page is grabbed from the browser cache, or I assume that I can try disabling browser caching, m wonders about the consequences of this for images, css, load time, etc. Weighing my options ... greetings.
UPDATE: Well, disabling browser caching may have reduced the frequency of this problem (not sure?), But definitely did not cure it. Now I think that I might have the same problem 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 browser. I am going to switch my normal use of my application in Dolphin for a while to find out if a problem occurs in this browser. What I have tried so far: using meta tags to disable browser caching (I think the Android browser ignores this anyway) ... changing the width of the table (I can try it again differently) ... Using the solution, posted in comment 14 here (dynamically creating a CSS link): https://code.google.com/p/android/issues/detail?id=11961#c14 , and finally I tried adding datetime ticks to the url in The desire to facilitate caching, which also did not work.
More useful information here: http://f055.tumblr.com/post/6364300769/viewport-bugs-in-android-browser