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

【问题标题】：android autofit mode causing issues with css width in web pageandroid自动调整模式导致网页中的css宽度问题
【发布时间】：2011-12-14 17:24:29
【问题描述】：

我在使用 android 浏览器的自动调整大小功能时遇到问题。当设备处于纵向模式时，我网站上的宽度有点乱。

我想做的是

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

我现在脑子里有以下内容

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

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

这肯定是由自动调整布局引起的（Android WebKit 源代码中的“kLayoutFitColumnToScreen”）。只是在禁用自动调整的情况下尝试测试，一切都被渲染正确（至少在我的 Android 设备上）。

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

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

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

更新：

如果有人知道，我仍在寻找解决方案。

找到遇到同样问题的人（尽管他们正在使用表格）

Spanned columns collapsing on Android web-browser (when using auto-fit pages)

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

【问题讨论】：

标签： android css html

【解决方案1】：

我一直遇到这个问题，并找到了适合我的解决方案。

我有一个主要的<div>，里面有一些嵌套的<div> 元素。 HTML 非常基础。我发现我的主要<div> 中的一个<div> 会环绕其文本，就好像我双击文本以放大它一样。此<div> 仅包含文本。此行为仅在纵向时发生，并在双击或切换方向后得到纠正。

由于这个问题是一个 Android 错误，没有 CSS 或 HTML 可以真正修复它。但是，下面的 CSS 对我来说令人满意地解决了这个问题；而且我不必关闭“自动调整页面”：

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

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

【讨论】：

谢谢。在我的纯文本丰富页面中，我几乎必须在任何地方添加它。 p, em, i, strong, h2, h3, a, li, div { background: url('/images/x.png'); }

【解决方案2】：

只是进一步回答上面对我有用的一个重要警告：IE8 中的重绘时间使得 1x1 透明像素方法无法在合适大小的画布上的目标上使用。

由于 CSS 无法检测自动调整或 android 浏览器（Android 上的 chrome 似乎还不错），我的解决方法是

针对较小的设备（因为 IE8 往往是桌面设备），并且
仅针对相关的“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' 会起作用，是的，但越具体，对重绘时间的影响就越小。

可能值得添加仅纵向检测模式，因为自动调整似乎并不针对横向 - 但我没有在足够多的设备上对其进行测试以确认这始终是正确的。

【讨论】：

非常感谢！但是有一个问题：我们真的需要 background-repeat:repeat 吗？没有它对我来说似乎工作得很好，但想检查一下你是否找到了一些需要它的用例。

【解决方案3】：

我只是想确认德尔伯特的解决方案是唯一对我有用的方法。为什么这行得通并不完全清楚，但它确实有效。我已经对这个问题进行了一些相当详尽的搜索，Tom 原始帖子中的链接似乎包含了所有相关内容。

为了它的价值，我尝试了一些相当激进的尝试来纠正一些<p>标签的宽度，这些标签深深地嵌套在<div>标签链中，使用这里提出的一些解决方案：

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

我还确认该行为是“自动调整网页”设置的结果。我没有 Android，但在使用模拟器时遇到了这些问题。

再次感谢德尔伯特的提示。

【讨论】：

【解决方案4】：

同样的问题。我的<p> 标签中的内容被涂抹到左侧。虽然我发现如果我向我的<p> 标签添加背景颜色，但还没有找到好的解决方案，它会“修复”问题。不过，由于添加背景颜色并不理想，我仍在努力寻找真正的解决方法。

【讨论】：

谢谢你；我花了大约 4 个小时试图弄清楚 wtf 正在发生，我的文本在屏幕上的 1/3 处换行>：|
如果您不想要实际的背景颜色，只需添加 background-color: transparent。对我来说很好。

【解决方案5】：

*{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}

【讨论】：

【解决方案6】：

是的，Android 4.x 似乎是原因。真的很烦人，因为这是默认行为！它彻底摧毁了我所有的网站...

目前我没有找到任何解决方案。正确的做法是在双击区域时使文本适合屏幕宽度。即使没有缩放，这个功能似乎也处于活动状态。

【讨论】：

【解决方案7】：

我只是添加一个透明的 png 图像作为重复背景。这也适用于 H1、H2、H3... 似乎受到相同窄列问题困扰的标签。通过使用透明 png，我仍然可以分配背景颜色或显示元素后面的任何内容。这并不完美，但它是我发现的最简单的解决方案，它不依赖于任何特定于浏览器的 hack，并且似乎在我见过的所有其他移动浏览器中运行良好。

虽然，我也注意到 SPAN 标记上的相同行为，并且上面的内容似乎不适用于此元素......很奇怪！

【讨论】：

【解决方案8】：

以 % 的形式给出 Width 而不是 px，例如 width:100%;

【讨论】：

已设置为 % 值，也尝试更改为 px

【解决方案9】：

p 标签和 li 的问题几乎相同，它们比周围的容器小得多，但仅限于 Android 4.x。对于 Android 2.3.x 和 Android 3.x，“自动调整页面”没有负面影响。

似乎他们试图改进某些东西，但以前效果更好，这很烦人。

【讨论】：

【解决方案10】：

这似乎是 Android 的编程问题。但是在您的移动浏览器中设置=>高级取消选中自动调整页面，这可以解决。但我们可能不希望我们的用户遵守。因此，暂时不应排除放置透明背景图像的简单技巧作为临时解决方案。使用 Drupal 作为框架，使用 Omega 作为我的响应主题，并且知道我的布局区域和外部 DIV 设置为 {display:block width:100%} 这让我发疯了几分钟。但是透明图像效果很好。

【讨论】：

【解决方案11】：

我在我的电子邮件内容所在的 td 上设置了最小宽度和宽度，现在在 Android 的 gmail 应用程序中运行良好，其中版本使用自动调整模式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Gmail Issue</title>
  </head>
  <body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td width="50%" valign="top"></td>
        <td width="1100" valign="top" style="min-width:1100px;"></td>
        <td width="50%" valign="top"></td>
      </tr>
    </table>
  </body>
</html>

【讨论】：

【解决方案12】：

有一点是肯定的，自动适应“功能”给开发人员带来了很多白发。

我通过在我的电子邮件顶部插入一个 1 像素高和 650 像素宽（我的电子邮件宽度）的透明图像解决了这个问题。

即使启用了自动调整，我的电子邮件现在也能按预期呈现。

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">

      <!-- HERE'S THE MAGIC -->    
      <table width="650" border="0" cellpadding="0" cellspacing="0">  
        <tr>
          <td height="1">
            <img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" />
          </td>
        </tr>
      </table>
      <!-- END THE MAGIC -->

      <!-- Start Wrapper-->
      <table width="650" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td >
            REST OF EMAIL HERE
          </td>
        </tr>
      </table>
      <!-- End Wrapper-->
    </td>
  </td>
</table>

【讨论】：

【解决方案13】：

通过向您的 CSS 添加背景图片，自动调整将被禁用。

其他发帖人建议添加单像素透明背景，但实际上您可以在 css 样式表顶部添加一个空背景图像，然后跳过额外的 http 请求并重绘。

 div, p { 
 background-image: url();
 }

我已经在我的模拟器和 Galaxy SII 中对其进行了测试，它似乎与添加实际 url 相同。

【讨论】：