机器人自动调整模式导致网页使用CSS的宽度问题 [英] android autofit mode causing issues with css width in web page
问题描述
我有问题了Android浏览器的自动调整功能。在我的网站的宽度会有点失控，当设备处于纵向模式。
我想要做的就是
- 有网站台式机和移动用户的相同版本。
- 允许用户放大和缩小，因为他们请。
目前，我有我的头以下
＆LT; META NAME =视CONTENT =WIDTH = 1100＆GT;
我发现下面的博客文章，描述了我的问题。
这是肯定的自动调整布局造成的 （kLayoutFitColumnToScreen在Android的WebKit源$ C $ C）。只是 尝试测试与自动调整残疾，一切都呈现 正确的（至少我的Android设备上）。
Android上的自动调整模式似乎缩水某些元素的宽度 而不影响它们的定位，或其他的定位 元素。所以，如果你有一个包含块宽度：1000px和 跨越该宽度的100％文本中，容器可保持1000px 宽，但它里面的文本将换屏幕的宽度。
<一个href="http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html">http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html
有没有办法从踢制止这种自动调整模式？我不希望禁用变焦。
更新：
我还在寻找一个解决方案，如果有人知道一个。
发现有人用同样的问题（尽管他们使用的是表）
<一个href="http://stackoverflow.com/questions/8237550/spanned-columns-collapsing-on-android-web-browser-when-using-auto-fit-pages">Spanned列崩于Android的网络浏览器（使用自动调整页面时）
<一个href="http://$c$c.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars">http://$c$c.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
我已经遇到这个问题，并找到了一个解决方案，为我工作。
我有一个主要的＆LT; DIV＆GT; 有一些嵌套的＆LT; DIV＆GT; 中的元素。的HTML是非常基本的。我发现有一个＆LT; DIV＆GT;在我的主＆LT; DIV＆GT; 就好像我有双重包装其文本-tapped来放大它的文本。这＆LT; DIV＆GT; 只包含文本。发生这种情况仅在纵向和双攻或转换方向后更正。
由于这个问题是一个Android的错误，没有CSS或HTML才能真正解决这个问题。但是，下面的CSS解决了这个问题圆满我;我没有关闭自动调整页面：
我添加了一个CSS 背景图像到＆LT; DIV＆GT; 。我只是用一个透明的，一个像素PNG作为背景。
DIV {背景图像：网址（../ IMG / blank.png）; }
I am having problems with the auto resize feature of the android browser. The widths on my site are going a bit haywire when the device is in portrait mode.
What I would like to do is
- Have the same version of the site for both desktop and mobile users.
- Allow the user to zoom in and out as they please.
I currently have the following in my head
<meta name="viewport" content="width=1100">
I found the following blog post which describes my problem.
This is definitely caused by the auto-fit layout ("kLayoutFitColumnToScreen" in the Android WebKit source code). Just try the test with auto-fit disabled and everything is rendered correctly (at least on my Android device).
The auto-fit mode on Android seems to shrink certain elements' width without affecting their positioning, or the positioning of other elements. So if you have a containing block with width: 1000px and text that spans 100% of that width, the container may remain 1000px wide but the text inside it will wrap at the screen width.
http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html
Is there a way to stop this autofit mode from kicking in? I don't want to disable zooming.
Update:
I am still searching for a solution if anyone knows of one.
Have found someone with the same problem (although they are using tables)
Spanned columns collapsing on Android web-browser (when using auto-fit pages)
I have been experiencing this problem and found a solution that works for me.
I have one main <div> with some nested <div> elements inside. The HTML is very basic. I found that one <div> within my main <div> would wrap its text as if I had double-tapped the text to zoom in on it. This <div> only contained text. This behavior occurred only in portrait orientation, and it corrected after double-tapping or switching orientation.
Since this problem is an Android bug, no CSS or HTML can really fix it. However, the following CSS resolved the problem satisfactorily for me; and I didn't have to turn off "Auto-fit pages":
I added a CSS background-image to the <div>. I just used a transparent, one-pixel PNG as the background.
div { background-image: url(../img/blank.png); }
这篇关于机器人自动调整模式导致网页使用CSS的宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
