在Android浏览器的宽度问题的Web应用程序 [英] Web app on android browser WIDTH issue

问题描述

所以，我只经历了Android浏览器这个问题为止。基本上我的网站能正常工作，几乎所有的时间（我从来没见过这个问题尚未对海豚，歌剧或天火），但偶尔，当我重新打开我的手机的主屏幕之一，从书签Android浏览器我的网站出现横向拉长，所以现在我只看到左手侧的第一2/3。其仿佛在浏览器刚刚失去了CSS或元数据信息，而它最小化。这里是我的meta标签，而我在我的表样式使用宽度为100％。

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

此问题似乎只在大约30分钟被点击书签时发生。重开股票的Andr​​oid浏览器。然后，它似乎是从浏览器缓存中获取页面，但仍运行于阿贾克斯窗口的onload，因此使用浏览器缓存的页面与阿贾克斯我想它的组合（也许？）的JavaScript DOM操作之上的东西认为Android浏览器的股票唯一有问题的，打破我的工作台宽度视区之外。或者，也许DOM的变化有什么关系呢。

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.

如果手机关机，然后和点击书签，股票浏览器从服务器重新加载页面，然后我不明白的问题。如果浏览器最小化，只需2分钟，没有问题后，书签再点击要么是因为浏览器刚刚重新显示器本身和最后一页正是因为它是离开了，没有做任何事情。

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.

我一直在想一些黑客，我可以扔在顶部的情况下强制重载从服务器所在的页面是从布劳尔缓存抓起，不然我guesss我可以尝试关闭浏览器缓存，但我米想知道这样做对图像，CSS，加载时间等权衡我的选择的影响......思念的欢迎。

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

更新：OK什么我已经试过到目前为止在我的Andr​​oid浏览器的股票该pvented间歇性问题，$ P $。我要我经常使用我的应用程序切换到海豚一会儿，看看是否在该浏览器出现问题。什么到目前为止，我已经试过是：用meta标签禁用浏览器缓存（我认为在一定程度上Android浏览器会忽略反正）...改变表格的宽度（我可能会再次尝试以不同的方式）...使用在这里评论14贴（动态创建CSS链接）解决方案：的 HTTPS：//$c$c.google.com/p/android/issues/detail ID = 11961＃C14 ，最后我试着追加日期时间刻度的网址，努力缓解缓存，还没有任何工作。

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.

更多有用的信息在这里： HTTP：//f055.tumblr .COM /后/ 6364300769 /视臭虫 - 在Android的浏览器

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

推荐答案

不知道这是否会帮助ü - 但是这是我做我的移动应用

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

这篇关于在Android浏览器的宽度问题的Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！