android autofit模式导致网页的CSS宽度的问题

我遇到了Android浏览器的自动resizefunction的问题。 当设备处于纵向模式时,我网站上的宽度会有点不合适。

我想要做的是

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

我现在有我的头以下

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

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

这绝对是由自适应布局(Android WebKit源代码中的“kLayoutFitColumnToScreen”)造成的。 只要尝试自动禁用testing,一切都呈现正确(至less在我的Android设备)。

Android上的自适应模式似乎缩小了某些元素的宽度,而不影响其定位或其他元素的定位。 所以如果你有一个宽度为1000px的包含区块和跨越该宽度的100%的文本,容器可以保持1000px宽,但是其内部的文本将以屏幕宽度包装。

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

有没有办法阻止这种自动适应模式? 我不想禁用缩放。

更新:

我仍然在寻找一个解决scheme,如果有人知道一个。

发现有人遇到同样的问题(虽然他们正在使用表格)

跨网页在Android网页浏览器上折叠(使用自适应网页时)

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

Solutions Collecting From Web of "android autofit模式导致网页的CSS宽度的问题"

我一直在遇到这个问题,并find了适合我的解决scheme。

我有一个主要的<div>有一些嵌套的<div>元素。 HTML是非常基本的。 我发现我的主要的<div>中的一个<div>会包装它的文本,好像我已经双击文本来放大它。 这个<div>只包含文本。 这种行为只发生在纵向方向,并在双击或切换方向后进行更正。

由于这个问题是一个Android的错误,没有CSS或HTML可以真正解决它。 然而,下面的CSS为我解决了令人满意的问题; 而且我不必closures“自动调整页面”:

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

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

只是进一步的回应上面的工作,我有一个重要的警告:在IE8重绘时间使1×1透明像素的方法不可用在一个体面的大小canvas上的目标。

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

  1. 目标较小的设备(因为IE8往往是桌面),和
  2. 只针对相关的'p'标签(autofit只针对一些'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'标签所在的位置,它们是自动assembly的,当然你需要改变它。 '身体'会起作用,是的,但更具体的是对重绘时间的影响越小。

自动适应似乎不是针对风景的 – 但是我没有在足够的设备上进行testing,以确认这一切都是真实的,所以值得添加一个仅限肖像的检测模式。

我只是想确认,Delbert的解决scheme是唯一对我有用的东西。 为什么这个工作并不完全明显,但它的工作原理。 我在这个问题上做了一些相当详尽的search,汤姆原来的post的链接似乎包括了所有的东西。

对于什么是值得的,我尝试了一些相当积极的尝试,在一些使用一些build议的解决scheme的深度嵌套深度<div>标签的一些<p>标签的宽度:

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

我也确认这种行为是“自动适应网页”设置的结果。 我不拥有一个Android,但使用模拟器遇到这些问题。

再次感谢Delbert的提示。

这里同样的问题。 我的<p>标签内的内容被冲到左侧。 没有find好的解决scheme,但我发现,如果我添加一个背景颜色到我的<p>标签,它“修复”的问题。 我仍然试图find一个真正的修复,虽然因为添加背景颜色是不理想的。

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

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

我目前没有find任何解决scheme。 当您双击该区域时 ,正确的行为是使文本与屏幕的宽度相符 。 看起来这个function即使在没有放大的情况下也是有效的。

我只是添加一个透明的PNG图像作为一个重复的背景。 这也适用于H1,H2,H3 …标签,似乎是困扰同一个窄列问题。 通过使用透明png,它允许我仍然分配一个背景颜色或显示元素后面的任何东西。 这并不完美,但它是我发现的最简单的解决scheme,不依赖于任何浏览器特定的黑客攻击,并且似乎在我见过的所有其他移动浏览器中都能正常工作。

虽然,我已经注意到SPAN标签上也有相同的行为,而上面的这个对于这个元素来说似乎没什么作用。

Width的百分比,而不是像,像width:100%;

我有几乎与p标签和李的问题相同的问题,他们是周围的容器小得多,但只有与Android 4.x. 使用Android 2.3.x和Android 3.x“自动调整页面”没有负面影响。

似乎他们试图改进某些东西,但是之前它运行得更好,这很烦人。

这似乎是Android的编程问题。 但在您的手机浏览器下的设置=>高级取消自动调整页面,这可以解决。 但是我们可能不希望我们的用户遵守。 所以暂时不应该排除一个简单的黑客来放置一个透明的背景图像作为一个临时的解决scheme。 使用Drupal框架和欧米茄作为我的响应主题,并知道我的布局区域和外部DIV设置{显示:块宽度:100%}这使我疯了几分钟。 但透明的图像很好地工作。

我在我的电子邮件内容所在的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> 

有一件事是可以肯定的,自动匹配的“function”给开发者带来了很多灰色头发。

我通过在我的电子邮件顶部插入一个高度为1像素,宽度为650像素(电子邮件宽度)的透明图像来解决此问题。

即使启用了auto-fit,我的电子邮件现在也可以呈现。

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

通过添加一个背景图像到您的CSS,自动适应将被禁用。

其他海报build议添加一个像素透明的背景,但实际上你可以添加一个空的背景图像到你的CSS样式表的顶部,并跳过额外的http请求和重绘。

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

我已经在我的模拟器和我的Galaxy SII中进行了testing,它似乎与添加实际的url相同。