Tuesday, March 25th, 2008

iPhone Optimization Script

Category: iPhone, JavaScript, Usability

iPhone Optimization Script

Bob Buffone has created a tool that can be used to output script and HTML to make your site more usable on an iPhone. He tells us about it here:

I bought an iPhone about six months ago; in that time I noticed that even though it had this part of the Web and that part of the Web. Every page I went to I was only reading this part and in order to do that, I needed to scroll it into view and resize the page the same way every time. When I go Ajaxian.com on my iPhone I need to scroll the content to the right location and scale it so the middle column fits the screen and then start reading. It’s a real pain in the ass.

This was the case for my blog as well. I didn’t want to rewrite it so I figured out a way to use a little JavaScript to set the scale and position of the page at start up so the main content area completely fills the screen for the iPhone.

Once you input the URL to your site, it gets loaded and you can interact with it to put the box in the right place. For Ajaxian, it then output the following HTML:

  1. <meta name="viewport" content="width=980; initial-scale=0.631163708086785"/>

and JavaScript to do the right thing on the iPhone:

javascript

  1. (function(){
  2.    
  3.     //Variable used to control the zoom and
  4.     //position of the page when it is loaded.
  5.     var viewport = {
  6.         initialScale: 0.631163708086785,
  7.         width: 980
  8.     };
  9.     //(-80) is for the navigation bar, otherwise you can't read it
  10.     //until it is fully loaded
  11.     var scrollPosition = {
  12.         left: 198,
  13.         top: (188-80)
  14.     }; 
  15.     if (/iPhone/i.test(navigator.userAgent)) { // sniff    
  16.         //write the meta tag for the initial scale.  This should
  17.         //happen in the <head> section of the html page.
  18.         document.write('<meta name="viewport" content="width='+
  19.                     viewport.width+'; initial-scale=' +
  20.                     viewport.initialScale + '">');
  21.        
  22.         //This loop will catch the page is loaded with out needing
  23.         //to use the onLoad event.
  24.         var _timer = setInterval(function(){
  25.         if (/loaded|complete|interactive/.test(document.readyState)) {
  26.             clearInterval(_timer);
  27.                                  
  28.             //This will scroll the content into view,
  29.             //could be enhanced with animated scrolling but less is more.
  30.             //if the user started scrolling then let them handle it.
  31.             if (window.pageXOffset == 0 && window.pageYOffset == 0)
  32.                 window.scrollTo(scrollPosition.left,
  33.                 scrollPosition.top);
  34.         }}, 10);
  35.     }
  36. })();

Posted by Dion Almaer at 6:23 am
11 Comments

+++--
3.9 rating from 23 votes

11 Comments »

Comments feed TrackBack URI

Good thinking. Well done

Comment by sekostar — March 25, 2008

Neat, but resizing and repositioning to a column isn’t really a chore, just a matter of double tapping, no?

Comment by coob — March 25, 2008

Nice, but where will it end. Will you at a script for any new browser/device? This would be a nice feature for a device bookmarking feature, not only to save the url but also the screen position and scale.

Comment by An — March 25, 2008

so what happens when Apple release another iPhone that has different screen size and/or browser scaling behavior? IMO it might be better to switch the nav layout and/or page css if the user’s screen size falls below a certain threshold. We spend alot of time thinking about progressive enhancement for browsers. – Maybe in the future we consider screen size as part of progressive enhancement too.

Comment by Chris Phillips — March 25, 2008

I don’t think this guy knows about the double-tap. This is some serious over-engineering.

Comment by Andrew Clarke — March 25, 2008

Actually, double clicking doesn’t work on all site. It really depends on the page layout, go to valleywag.com, doesn’t work. Even this page if I double click in the qoute is a pain.

Over engineered? Probably. iPhone supporting a meta tag that takes a querystring would be better.

Also you can this approach to animate the view port.

Comment by digitalIchi — March 25, 2008

I have been developing a page with this sort of issue in mind the site has 2 columns 1 is for the main content and the second has reference information, to stop the user from getting lost I have used thick or images that span the 2 columns and as the others have commented the user can simply double tap on the bar to return to the correct page width.

Comment by Dai — March 25, 2008

Good find, it’s small touches like these that make a site stand out amidst the crowd.

Comment by Anonymous — March 25, 2008

You can disable zooming via: , which would ultimately disable double tapping/pinching for zoom functionality.

If you read up on the API at http://developer.apple.com, there’s a load of neat stuff there.

Comment by MezZzeR — March 26, 2008

EDIT: My code was dismissed on my last comment, so, adding to that, in your meta tag you can add ‘user-scalable=no’ and it’ll disable pinching/double tapping for zooming.

Comment by MezZzeR — March 26, 2008

This is not a good idea, I think with a different screen size it will all start to go wrong

Comment by Aphrodisiac — July 31, 2008

Leave a comment

You must be logged in to post a comment.