iPhones

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:

iPhone running fortune

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:

Fortune on the iphone

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

Fortune on the iphone before viewport scaling

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).

One Response to “iPhones”

  1. Sailor Coruscant Says:

    I think I’ve mentioned before that I hate you.
    That’s so awesome.

Leave a Reply