Search code examples
fontssafaricross-browserzooming

Safari zoom in/out ruins page layout (doesn't change font-size well)

I want to make my website cross-browser but there's one problem.

The zoom in/out function of Safari ruins my website layout - it doesn't change the font-size well (or at least like IE, Firefox and Chrome does).

How can I fix it?

Solution

  • Zoom is complicated because browsers have three means of doing it:

    1. Zoom text only (the standard IE and Safari <= 3 way)
    2. Intelligently zoom the whole page (Opera, FF 3+, Safari 4+, Chrome, and IE 9 option)
    3. Render the page at "normal" size and scale the whole thing (the iPhone way, optional in Safari 5 on Lion)

    The problem is that browsers don't do this intelligently:

    • IE <= 9 will not scale elements sized in px, ever. If your page uses all fonts in px, it doesn't zoom. If you then specify your base font as something like 10px, IE users who can't read it are out of luck, unless they have IE 9.
    • Safari (and some others) will if set to zoom fonts only, scale-up fonts in px, but without adjusting line-heights or other layout specified in px. This is aggravating to the extreme.
    • Safari 4+ will not scale a font specified as a percentage of value in px. That means if your base font is 10px and you specify a selector as having font-size: 100%, every element, and the image will get bigger, but the text stupidly will not. THIS IS BROKEN, and I can't get anyone at Apple to admit it. Chrome likely suffers the same idiocy.

    A solution

    I should say the first step is to seriously abuse anyone who would force a base font site-wide of 10px, because with ever higher and higher DPI displays that is just a cruel thing to inflict upon your users. But that's the visitors' solution. Yours as an author should be a bit different:

    1. Unless your site is fixed-width 740px or something, set the base font to 1em and leave it there. If you can't get away from the 740px design model, do not set your base font smaller than 12px. With 100dpi screens, 12px is 8.6pt. At 132 DPI (iPhone4 and forthcoming other devices), it's 6.5pt. Accessible to anyone over the age of 40, it ain't even close, to say nothing of low-vision users like me. Consequently, the 10px font so favored by people who seem to think the text is an "accent" to a page is 5.5pt on a 132 DPI screen.
    2. If your header uses an image you can't scale, make sure your header looks good if everything EXCEPT for its scales. Specify your header fonts in px, overriding the 1em in the base. IE <= 9 will never scale it, ever. Safari < 4 will probably screw it up. Can't really be helped.
    3. Ensure that your CSS and layout allow vertical or scrolling overflow. Scrolling overflow doesn't work on iOS, but all we've got there is pinch-zoom anyway. It's not hard to make your body content be fluid-height. Fluid-width takes more work (but I do that too, personally!)
    4. Don't ever size fonts in percentages. Always use fractions of an em. 1.2em is 120%. Likewise, 0.75em is 75%. I don't ever use less than 0.75em of the base font, and only for incidental text.

    Result

    IE can magnify your page body, but not the header.

    Safari 4 will zoom the whole page. By avoiding percentages of a base font in px, you avoid a Safari bug I can't get Apple to acknowledge whereby fonts NEVER zoom, even though every other part of the page does. This is likely the problem you're seeing.

    The iPhone will probably continue to depend on pinch zoom unless you provide a mobile stylesheet. (If you do, please don't set max-zoom: 1.0, it's annoying!)

    That's it in a nutshell.