maebmij’s blog

It’s all iPhones at work at the moment. I got to play with one for a few minutes, so I finally got to try out my Fortune iPhone-web-interface, mentioned previously:

Something interesting that I hadn’t been able to visualise before was “viewport” scaling: The browser de-couples the physical screen resolution from the page’s virtual resolution. When you visit a web page, the browser simulates a relatively large window, and then scales the resulting page down so it fits on the screen, but is very small. If you’ve already designed with a small screen in mind, you end up with a lot of wasted space unless you tell the browser (via a meta tag) that you’d like it to pretend a smaller window size (resulting in less scaling). See Apple’s iPhone-Safari dev notes for a proper explanation.

Here’s Fortune with a specified virtual window width of 600 pixels:

And here’s what it looks like without a specified viewport width:

Incidentally, the viewport width seems to stay constant when the orientation changes: If you rotate to landscape, the page image zooms in somewhat so that it can still fill the screen without becoming any wider in terms of the virtual browser window (i.e. the viewport width is preserved).

This entry was posted on Wednesday, October 3rd, 2007 at 7:54 pm and is filed under computers, mac, tech. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.