06 June 2013

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. It's another file to download.
  2. The performance hit on redraw times in IE8 and lower essentially breaks your website if you're using it for every p tag, (or worse for them all)
The problem is that CSS doesn't allow detection of auto-fit, or Android (rightly, and Android Chrome doesn't have auto-fit either). So here was my solution:
1 /* work around mobile device auto-fitting */
2 @media only screen and (max-device-width: 800px) {
3    #content p {
4         background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); 
5         background-repeat:repeat;
6     }
7 }

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?


blog comments powered by Disqus