Setting the ViewPort for iPhone/iTouch Ready Web Sites
Scenario:
After rolling out two new web applications targeted for WindowsMobile and Blackberries, we had a request to test and support Apple iPhone/iTouch devices. Not a big deal, or so I thought.
Unfortunately, Safari on these devices displayed properly, but every page required zooming and was almost impossible to read. There had to be a way to get Safari to respect the set width of the page rather than scale it out.
Solution:
Michael: “are you setting the viewport?”
Thanks to Google and a bit of help from a friend (thanks Michael!), the mysterious solution was just a meta tag away. The best place to start would be the “Safari Web Content Guide for iPhone OS”. I had found bits of this document elsewhere, but the information about the Viewport tags are extremely helpful.
The default viewport width is 980px; however, you can hard code the width of your page. I placed the following tag in the <head> section of my MasterPage for the mobile site.
<!– meta tag for iPhone/iTouch devices –>
<meta name=”viewport” content=”width=350px” />
That worked; however, the HTML elements (buttons, selects, etc) were still far too small. It seems that “fit to device” is more explicitly expressed with the device-width value.
<!– meta tag for iPhone/iTouch devices –>
<meta name=”viewport” content=”width=device-width” />
device-width not only fit the text to the screen, but also properly scaled the elements as well.
Excellent. 
I need to fully read that Safari Web Content Guide to see if there are other wonky tags for iDevice goodness. 
