android浏览器宽度问题上的Web应用程序

Question

所以到目前为止，我只在 Android 浏览器上遇到过这个问题。基本上我的网站几乎一直运行良好（我还没有在 Dolphin、Opera 或 Skyfire 上看到问题）但偶尔当我从手机主屏幕上的书签重新打开 Android 浏览器时，我的网站会出现水平拉伸，所以现在我只看到左侧的前 2/3。好像浏览器在最小化时只是丢失了 CSS 或元信息。这是我的元标记，我在表格样式中使用了 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 浏览器。然后，似乎浏览器从其缓存中获取页面，但仍然为 ajax 运行窗口 onload，所以我认为它使用浏览器缓存页面与（也许？）顶部来自 ajax 的 javascript DOM 操作的组合是什么Android股票浏览器唯一存在的问题，在视口之外打破了我的表格宽度。或者可能是 DOM 更改与它无关。

如果手机关机再开机，点击书签，股票浏览器从服务器重新加载页面，那么我不明白这个问题。如果浏览器被最小化，并且在仅仅 2 分钟后重新点击了书签，那也没有问题，因为浏览器只是重新显示自己和最后一页，就像它离开时一样，没有做任何事情。

我一直在考虑某种技巧，我可以在从浏览器缓存中抓取页面的情况下强制从服务器重新加载，或者我想我可以尝试关闭浏览器缓存，但我我想知道这样做对图像、CSS、加载时间等的影响。权衡我的选择……欢迎提出想法。

更新：关闭浏览器缓存可能会减少此问题的发生率（不确定？），但绝对不能治愈它。我现在想我可能遇到了与这篇博文中描述的相同的问题：

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

更新：好的，到目前为止，我没有尝试过在我的 Android 库存浏览器中阻止这个间歇性问题。我打算将我的应用程序的常规使用切换到 Dolphin 一段时间，看看该浏览器是否出现问题。到目前为止我尝试过的是：使用元标记来禁用浏览器缓存（我认为在某种程度上Android浏览器无论如何都会忽略这一点）......改变表格宽度（我可能会以不同的方式再次尝试）......使用此处在评论 14 中发布的解决方案（动态创建 CSS 链接）：https://code.google.com/p/android/issues/detail?id=11961#c14 最后我尝试将 Datetime 刻度附加到 URL 以减轻缓存，但这也没有奏效。

更多有用信息在这里：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;
 }