android autofit模式导致css宽度在网页中的问题 [英] android autofit mode causing issues with css width in web page
问题描述
我在使用Android浏览器的自动调整大小功能时遇到问题。
我想要做的是
- 为桌面用户和移动用户提供相同版本的网站。
- 允许用户放大和缩小。 / li>
我目前在头中有以下内容
< meta name =viewportcontent =width = 1100>
我发现以下博客文章描述我的问题。 p>
这绝对是由自动适配布局
（Android WebKit源代码中的kLayoutFitColumnToScreen）引起的。只是
尝试测试与自适应禁用，一切正确呈现
（至少在我的Android设备）。
自动适应模式在Android上似乎收缩某些元素的宽度
，而不影响他们的定位，或其他
元素的定位。所以如果你有一个包含宽度为1000px和
文本跨越100％的宽度的容器，容器可以保持1000px
宽，但其中的文本将包裹在屏幕宽度。
http： //www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html
有没有办法阻止此自动配合模式踢？
$ b 更新：
我仍在搜索
发现有相同问题的人（虽然他们正在使用表格）
上面的工作对我有一个重要的警告：IE8中的重绘时间使得1x1透明像素方法不能在一个体面的大小画布上的目标。
t检测自适应或Android浏览器（Android上的chrome似乎很好），我的解决方法是
- 定位较小的设备往往是桌面），并且
- 只定位相关的'p'标签（自动适应只定位一些'p'标签），因此如果我们只在需要的地方应用此修复，
- Have the same version of the site for both desktop and mobile users.
- Allow the user to zoom in and out as they please.
- target smaller devices (since IE8 tends to be desktop), and
- only target the relevant 'p' tags (autofit only targets some 'p' tags), so if we apply this fix only where it is needed then we keep the redraw performance impact as low as possible.
我的解决方法（根据上述Demetic的回答）：
/ *解决移动设备自动装配* /
@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将工作，是的，但更具体的对重绘时间的影响越小。
在仅肖像检测模式下可能值得添加，适合似乎没有针对风景 - 但我没有测试它在足够的设备，以确认这是总是真实的。
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
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)
Just furthering the answers above which worked for me with an important caveat: the redraw time in IE8 makes the 1x1 transparent pixel method unusable on that target on a decent size canvas.
Since CSS can't detect auto-fit, or android browsers (chrome on Android seems fine anyway), my workaround was to
My workaround (based on Demetic's answer above):
/* 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;
}
}
On my website '#content' is where the 'p' tags reside that are being auto-fitted, naturally you'd need to change this. 'body' will work, yes, but the more specific the lower the impact on redraw time.
It may be worth adding in a portrait-only detection mode since auto-fit doesn't seem to be targeted at landscape - but I haven't tested it on enough devices to confirm that this is always true.
这篇关于android autofit模式导致css宽度在网页中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
