Resize browser window to match iPhone viewport dimensions

I've recently become interested in optimizing sites for the iPhone and iPod touch. While nothing beats testing on the device itself, I often find it quicker to test changes on my Mac. Changing the user agent string is a piece of cake in Safari (Develop > User Agent > Mobile Safari) but what about adjusting the browser window's dimensions to match those of the iPhone?

I've created two bookmarklets to allow the current page to be loaded in an iPhone-sized window with a single click:

  • Portrait (labelled "⁑")

    javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(480+15)+',scrollbars=yes');

  • Landscape (labelled "**")

    javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(320+15)+',scrollbars=yes');
iPhone testing bookmarklets
iPhone testing bookmarklets: portrait and landscape
Safari window resized to iPhone portrait dimensions
320x480: iPhone portrait dimensions
Safari window resized to iPhone landscape dimensions
480x320: iPhone landscape dimensions

It appears that I need to rework this site's style sheet to better present content in these smaller viewports!

Comments

Bookmarklet Installation Instructions:

  1. Copy the code "javascript:open... yes');"
  2. Paste it in the Address Bar (where you normally enter a URL like www.google.com).
  3. Drag the "globe" looking icon that is at the start of the Address Bar down into the Bookmarks Bar (directly under).
  4. You will be prompted to name you bookmark... delete all the code here, then...
  5. Copy and Paste in "⁑" for Portrait code, or "**" for the Landscape code.
  6. Click on your new Bookmark to run the Javascript code on the current page (which should open a popup window, with the iPhone dimensions, and the current page's content displayed).

Hope that helps some noobs – Bookmarklet installation confused me the first time I did it ;-)

Just realised your dimensions are a little off in some situations... you are using the whole viewport 480x320... however you are not compensating for the Status bar, URL text field or Button bar.

See Dimensions of the iPhone Display.

In my app I scroll to hide the "URL text field"... so I get the maximum 416px height.

If content should exceed the viewable area on only the Y axis (height):

javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(416)+',scrollbars=yes');

If content should not exceed the viewable area:

javascript:open(location,'iPhone:portrait','innerWidth='+(320)+',innerHeight='+(416)+',scrollbars=no');

... same rules apply to landscape – just different dimensions.

Landscape ... Status Bar and Button bar visible...

javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(256)+',scrollbars=yes');

javascript:open(location,'iPhone:landscape','innerWidth='+(480)+',innerHeight='+(256)+',scrollbars=no');

Thanks, Chris, for taking the time to add the bookmarklet installation instructions.

You can even make them into links that can just be dragged onto the bookmarks bar ** ⁑ (Styling of the links borrowed from Instapaper)

Chris

Hi David, I developed a web app especially for doing such job, it supports set the browser window by both Inner and Outer width, plus show value of current size in real-time when resize the browser manually. Support Safari, Firefox and IE. http://www.resizemybrowser.com Let me know how do you think about it. :)

Chen

Respond