android - Android 浏览器 WIDTH 问题上的 Web 应用程序

Question

到目前为止，我只在 Android 浏览器上遇到过这个问题。基本上我的网站几乎一直都运行良好(而且我还没有在 Dolphin、Opera 或 Skyfire 上看到问题)但是偶尔当我从手机主屏幕之一的书签重新打开 Android 浏览器时，我的网站出现水平拉伸(stretch)，所以现在我只看到左侧的前 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 股票浏览器有独特的问题，在视口(viewport)外打破了我的表格宽度。或者 DOM 更改可能与它无关。

如果手机关机后再开机，点击了书签，原版浏览器从服务器重新加载页面，那么我就不会遇到问题。如果浏览器最小化，并且在 2 分钟后重新点击书签，也没有问题，因为浏览器只是重新显示自己和最后一页，完全按照它离开时的样子，没有做任何事情。

我一直在考虑某种 hack 方法，如果页面是从浏览器缓存中获取的，我可以放在上面强制从服务器重新加载，或者我想我可以尝试关闭浏览器缓存，但我'我想知道这样做对图像、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最后，我尝试将日期时间标记附加到 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;
 }