Making this Website fit your iPhone

After I created my new site design I decided I wanted it to fit nicely on my iPhone. When I browsed to the site, it worked okay, but I wanted more. I identified the following issues I wanted to solve.

1. The initial zoom was too small by default.
2. When I edit a page the zooming in and out is dizzying.

The first two problems were both correctable with a single tag supported by the mobile Safari browser. The meta viewport tag. My page was designed so that the usable area is exactly 700 pixels. Around that are 20 pixels of padding, a 1 pixel border, and another 20 pixels of padding around that. Add both sides together (or measure it) and you come up with 782 pixels for the ideal size. So, I set the viewport width to 782 and turn off user scaling.

<meta name="viewport" content="width=782, user-scalable=no">

Perfect, that looks good. You might argue that disabling user scaling is bad for usability, and you'd be right, but I couldn't stand the zooming when I was trying to edit things.

After fixing the zoom, I found that the font size for editing was a bit too small. Specifically, the “textarea” box ended up with really small text. So, I grabbed Google and found that you can increase that size with the special iPhone css tag “-webkit-text-size-adjust”. I added that to my page, but it didn't seem to change anything. The next solution I found was to add another stylesheet for small displays.

<link media="only screen and (max-device-width: 480px)" 
href="css/iphone.css" type="text/css" rel="stylesheet" />

So far, that hasn't worked either. But, I've run out of time. For now, I'll leave the tiny font…