Android瀏覽器上的Web應用程序WIDTH問題

Question

所以我只在Android瀏覽器上遇到過這個問題。基本上我的網站幾乎可以在任何時候都正常工作（而且我還沒有在Dolphin，Opera或Skyfire上看到過這個問題），但偶爾當我從手機主屏幕上的書籤重新打開Android瀏覽器時，我的網站會水平伸展，所以現在我只看到左側的前2/3。它的'好像瀏覽器在最小化時丟失了CSS或元信息。這裏是我的meta標籤，我在我的表格樣式中使用寬度爲100％。

<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"/> 

此問題似乎只發生在大約30分鐘後點擊書籤時。重新打開股票Android瀏覽器。然後，似乎瀏覽器從它的緩存中獲取頁面，但仍然運行窗口onload爲ajax，所以我想它的組合使用瀏覽器緩存頁面（可能？）從頂部的Ajax的JavaScript DOM操作是什麼Android股票瀏覽器唯一存在問題，在視口外打破我的表格寬度。或者，也許DOM的變化與它無關。

如果手機已關閉，然後開啓，並且已點擊書籤，股票瀏覽器將從服務器重新加載頁面，那麼我不會遇到問題。如果瀏覽器最小化，書籤在2分鐘後重新點擊，沒有問題，因爲瀏覽器只是重新顯示自己，最後一頁完全沒有任何問題。

我一直在考慮某種黑客攻擊，如果從brower緩存中抓取頁面，或者我想嘗試關閉瀏覽器緩存，可以強制從服務器重新加載，但我想知道這樣做對圖像，CSS，加載時間等的影響。權衡我的選擇......想法歡迎。

更新：關閉瀏覽器緩存可能減少了這個問題的發生率（不知道？），但絕對沒有治癒它。現在我想我可以是具有在這篇博客中描述了同樣的問題：

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

UPDATE：OK沒什麼到目前爲止，我已經試過阻止了這種間歇性問題，在我的Android瀏覽器的股票。我打算將我的應用程序的常規使用切換到Dolphin一段時間，以查看問題是否出現在該瀏覽器中。到目前爲止我嘗試過的是：使用元標記來禁用瀏覽器緩存（我認爲Android瀏覽器在某種程度上忽略了這一點）...改變表格寬度（我可以以不同的方式再次嘗試）...使用這裏發佈的解決方案（動態創建CSS鏈接）的解決方案：https://code.google.com/p/android/issues/detail?id=11961#c14，最後我嘗試在URL中添加Datetime ticks以緩解緩存，但這也沒有奏效。

更多有用的信息在這裏：http://f055.tumblr.com/post/6364300769/viewport-bugs-in-android-browser

Answer 1

不知道這是否會幫助ü - 但是這是我做了我的移動應用

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; 
}