iPhone development bookmarklets [27062007]

Part 1, where I go off on a tangent.

There's a mad techno-media lather working up over the launch of the iPhone, like someone dumped a shipload of hype concentrate into the oceans of geekery. Our office houses at least one particularly fervent Apple watcher and thus we're all immersed in the bubbles, despite being on the other side of the world to every iPhone in existence right now (and, sadly, for the forseeable future).

This post does have some genuine relevance to Apple's Jesus phone, but first I have to tell the story.

While we were developing this site, I scrapped together a couple of bookmarklets to help us compose screengrabs for our portfolio. Virginia had provided me with pixel-precise dimensions for the images (667x225, fyi), and I thought it would be useful to frame the shots in the browser before copying the screen to the clipboard for cropping.

What I wanted was a bookmarklet that set the viewport of my browser to exactly 667x225 pixels. This is different from setting the browser window to specific dimensions — what I wanted was the visible page area to be a certain size.

Which is something of an idiosyncratic situation, I suppose. Anyway, I ended up writing both bookmarklets, available below. Drag and drop them to your browser toolbar.

Resize Window (prompt)

Resize Viewport (prompt)

Note that Render Viewport won't work in:

• IE — didn't have a need, and IE's bookmarklet support is woeful
• Quirks mode — too many quirks

Part 2, where I bring it all back to the device du jour.

So, the iPhone. A lot of folks are going to be making apps specifically for, or with a special compatibility mode for, the iPhone. Now the iPhone's Safari has pretty good support for displaying the 800x600+ layouts on which the web floats its boat, but still, you won't always want to force your iPhone users to zoom each time they use your application. You'll want to give them something that works at 320x480 (or 480x320). And for convenience, you'll want to preview it on your development machines, running Safari or Firefox. Which means you're going to want these:

Resize Viewport (iPhone vertical)

Resize Viewport (iPhone horizontal)

Note: I've extrapolated the viewport dimensions by multiplying the ratios of the Safari chrome in published screenshots against the known screen resolution of the display. In both modes, the status bar is 18 pixels high; in vertical mode the toolbar appears to be 46px and horizontal it's 32px. So, I'm going on 320x416 for vertical and 480x270 for horizontal. I might be out by a pixel or two—if so, let me know and I'll update accordingly.

---

Your name:
Your email address:
Your website:

Your comment
Only the comment field is required. Omitting the ID fields increases your risk of being mistaken for spam.

Preview or