android autofit mode causing issues with css width in web page

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

1. target smaller devices (since IE8 tends to be desktop), and
2. 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.

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.

This appears to be a programming issue with Android. But in your mobile browser under Settings=>Advanced uncheck Auto-fit pages and this can be resolved. But we may not want our users to abide. So for the time being a simple hack as to placing a transparent background image should not be ruled out as a temporary solution. Using Drupal as a framework and Omega as my responsive theme and knowing my layout regions and outer DIVs are set to {display:block width:100%} this drove me nuts for a few minutes. But the transparent image worked nicely.

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

I just wanted to confirm that Delbert's solution was the only thing that worked for me. It's not completely apparent as to why this works, but it works. I've done some fairly exhaustive searching on the issue, and the links from Tom's original post seems to include about all there is out there.

For what it's worth, I tried some fairly aggressive attempts at correcting the width of some <p> tags nested deeply within a chain of <div> tags using some of the proposed solutions here:

* { background-color: transparent; } did not work for me. However, * { background-image: url("/image/pixel.png"); DID work for me (where pixel.png is a 1x1 transparent PNG). I eventually relaxed this to apply only to my nested <p> tags, and found that my paragraphs were finally spanning the intended, correct width.

I also confirmed that the behavior is a result of the "Auto-fit web pages" setting. I do not own an Android, but experienced these issues using the emulator.

Thanks again to Delbert for the tip.

I simply add a transparent png image as a repeated background. This also works for H1, H2, H3... tags that seem to be plagued by the same narrow-column problem. By using a transparent png, it allows me to still assign a background color or show whatever is behind the element. This is not perfect, but it is the simplest solution I have found that does not rely on any browser-specific hack and seems to work well in all other mobile browsers I have seen.

Although, I have noticed the same behavior on SPAN tags as well, and the above does not seem to work for this element... weird!

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

Same problem here. The content within my <p> tags is smushed to left side. No good solution found yet though I've found that if I add a background color to my <p> tag it "fixes" the issue. I'm still trying to find a real fix though since adding a background color is not ideal.

Yes it seems that Android 4.x is in cause. Really annoying because it is the default behaviour ! It completely destroy all my websites...

I didn't found any solution at the moment. The proper behaviour is to fit the text with the width of your screen when you double tap the area. It seems that this feature is active even when not zoomed.

I have nearly the same problem with p tags and li's they are much smaller then the surrounding container, but only with Android 4.x. With Android 2.3.x and Android 3.x "auto-fit pages" has no negative side effect.

Seems they tried to improve something, but it worked better before, that's annoying.

give Width in % instead of px, like width:100%;