The built in Android browser for versions 4.something onwards have an annoying little feature called auto-fit turned on automatically. What this does is fix the width of the primary text column to be as wide as the device when zoomed in which leads to some awful artefacts - many times the text appears to only fill half or a third of the column it was designed for.

The fixes that people are fudging in aren’t very safe at all: the suggestion is to put set a transparent 1x1 pixel .gif file as the background of the relevant tags, and one solution I saw applied to to every tag using the * selector.

The problem with using this technique is that:

1
2
3
4
5
6
7

/* 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.

What this does is a) Embed the 1x1 pixel directly into the style-sheet as a data-insert rather than having the browser do another file load, and b) Only target smaller devices (since auto-fit only applies to smaller devices), hence ruling out the IE8 which is desktop only.

Alternatively you could apply this to everything and then override it in your IE8 stylesheet, but why inflict this fudge on desktop users at all?