MobileSafari-friendly
I wanted for some time to make my website iPhone/iPod Touch friendly. I tentatively did something a little more than a year ago by adding some media queries to my stylesheet so that the already existing @media handheld rules would apply to the iPhone too. Once tested however, the result wasn’t too great. Now, I just got a new iPod Touch, allowing me to experiment further.
The goal is that you don’t need to zoom to read the content, scrolling is all you should need. The technical constrains I settled upon:
There should be no separate page for MobileSafari. Although it’d certainly have been possible, my pages are already lightweight enough so that it makes things pretty unnecessary.
This is entirely a presentation issue, there should be no special markup in the webpage. All should be done through CSS.
This last constrain was a little problematic given that Apple decided for some reason that the viewport for the page should be put in a meta tag in the head of the HTML file, this way:
<meta name="viewport" content="width=808" />
So I’m left with no possibility of setting the content width in virtual pixel, and MobileSafari isn’t clever enough to figure out that when I’m not using the whole width 980 virtual pixels and size things accordingly.
I finally settled using the -webkit-text-size-adjust CSS directive (specific to MobileSafari) to increase the text size until the page covers the whole screen width. The downside of this approach is that images are a little too small, but since this website is mostly about text, and since you can easily zoom on images on an iPhone, there’s not much harm.
Now, there is a lot more in my handheld/MobileSafari stylesheet, notably using Helvetica instead of Palatino and reflowing a little the layout of the main page to avoid having two columns. And I like the result, since you almost never need to zoom on anything anymore.
And I’m just now realizing that with the iPhone SDK available for free from Apple, you don’t have to have the actual device in hand to test your website with MobileSafari. The SDK contains an iPhone Simulator that includes MobileSafari which is perfectly fine for testing. The only thing you’ll miss is how it looks on the high-resolution screen of the iPhone/iPod Touch… and perhaps how hard it is to hit things with your fingers.