android autofit mode causing issues with css width in web page

Question

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)

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

Answer 1

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); }