Make your website look right on the iPhone
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!
