android自动调整模式导致网页中的CSS宽度问题

Question

我有Android浏览器的自动调整大小功能的问题.当设备处于纵向模式时,我网站上的宽度有点乱.

我想做的是

• 为桌面和移动用户提供相同版本的站点.
• 允许用户随意放大和缩小.

我目前在脑海里有以下几点

<meta name="viewport" content="width=1100">

我发现以下博客文章描述了我的问题.

这肯定是由自动调整布局引起的(Android WebKit源代码中的"kLayoutFitColumnToScreen").只需尝试禁用自动调整测试,一切都正确呈现(至少在我的Android设备上).

Android上的自动调整模式似乎会缩小某些元素的宽度,而不会影响其定位或其他元素的定位.因此,如果您有一个宽度为1000px的包含块和跨越该宽度100%的文本,则容器可能保持1000px宽,但其中的文本将以屏幕宽度换行.

http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html

有没有办法阻止这种自动调整模式开始？我不想禁用缩放.

更新:

如果有人知道,我仍在寻找解决方案.

找到了有同样问题的人(虽然他们正在使用桌子)

跨页列在Android Web浏览器上折叠(使用自动调整页面时)

http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

Answer 1

我遇到了这个问题,并找到了适合我的解决方案.

我有一个主要内部<div>有一些嵌套<div>元素.HTML非常基础.我发现<div>我的主要内容中的一个<div>会将其文本换行,就像我双击文本以放大文本一样.这<div>仅包含的文本.此行为仅在纵向方向上发生,并在双击或切换方向后更正.

由于此问题是Android错误,因此没有CSS或HTML可以真正解决它.但是,下面的CSS令我满意地解决了这个问题; 而且我没有关闭"自动适应页面":

我添加了一个CSS background-image的<div>.我只使用透明的单像素PNG作为背景.

div { background-image: url(../img/blank.png); }

Answer 2

只是通过一个重要的警告来进一步解决上面对我有用的答案:IE8中的重绘时间使1x1透明像素方法在一个体面的大小画布上无法在该目标上使用.

由于CSS无法检测到自动适应或Android浏览器(Android上的chrome似乎很好),我的解决方法是

1. 目标较小的设备(因为IE8往往是桌面),和
2. 仅针对相关的'p'标记(自动调整仅针对某些'p'标记),因此如果我们仅在需要的地方应用此修复,那么我们会尽可能降低重绘性能影响.

我的解决方法(根据Demetic的答案):

/* work around mobile device auto-fitting */
@media only screen and (max-device-width: 800px) {
   #content p {
       background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); 
       background-repeat:repeat;
    }
}

在我的网站上,'#content'是'p'标签所在的自动装配的地方,当然你需要改变它.'body'会起作用,是的,但更具体的是对重绘时间的影响越小.

可能值得添加仅限纵向检测模式,因为自动调整似乎不是针对景观 - 但我没有在足够的设备上测试它以确认这始终是真的.

Answer 3

我只想确认Delbert的解决方案是唯一对我有用的东西.关于它为何起作用并不完全明显,但它确实有效.我已经对这个问题做了一些相当详尽的搜索,而Tom的原始帖子中的链接似乎包含了所有有关的内容.

为了它的价值,我尝试了一些相当积极的尝试,使用这里提出的一些解决方案来纠正<p>嵌套在<div>标签链中的一些标签的宽度:

* { background-color: transparent; }不适合我.但是,* { background-image: url("/image/pixel.png");DID适用于我(其中pixel.png是1x1透明PNG).我最终放松了这个只适用于我的嵌套<p>标签,并发现我的段落最终跨越了预期的正确宽度.

我还确认该行为是"自动调整网页"设置的结果.我没有Android,但使用模拟器遇到了这些问题.

再次感谢Delbert提示.

Answer 4

给出Width% 而不是 px，例如width:100%;