Ever looked at your site on the iPhone or the iPod Touch and just thought… “that looks shocking!”?

Well my friends, I did once. But luckily, there are a few handy little things you can add to the header of your site and into your CSS. Let’s get cracking.

Firstly, lets fix that weird issue with font size.

The Safari browser makes the text of your site slightly larger, I assume this is so it is easier to read on the small screen, but it can break the design of your site.

To do this simply add:

-webkit-text-size-adjust:none;

You can add that to the body in CSS, like so:

body {
    -webkit-text-size-adjust:none;
}

Or, if you have a reset stylesheet, add it too that instead. I definitely recommend using the reset.css.

The second issue (well I think its an issue), is unless you stat otherwise, the location bar stays visible after the page has completely loaded. The user then has to scroll an extra 60 pixels to see the content.

To fix this, we have a little bit of javascript that stats, when the site has finished loading, move to this point.

window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);
    function loaded() {
        document.getElementById("page_wrapper").style.visibility = "visible";
        window.scrollTo(0, 1); // pan to the bottom, hides the location bar
}

Simply edit the bit that says, “page_wrapper” to be whatever div you are using on your site.

Place this code directly in the header of the site, or into a seperate JavaScript page and include that, I recomment the latter.

Now check out your snazzy site, working as it should on the iPhone/iPod Touch!

Related Articles

• PNG fix for Internet Explorer 6
• LIDA Website
• COI HSE Asbestos
• Display file extension icon using only CSS – Extended
• Display file extension icon using only CSS