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 w

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

By adding a background image to your css, auto-fit will be disabled.

Other posters have suggested adding a single pixel transparent background, but you can actually just add an empty background image to the top of your css stylesheet and skip the additional http request and redraw.

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

I have tested it in my emulator and my Galaxy SII and it seems to work the same as adding an actual url.

Answer 5

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.

Answer 6

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.