iPhone Optimization Script

Bob Buffone’s new tool can be used to output script and HTML to make your website more usable on an iPhone. Ben details the tool: 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 […]

Bob Buffone’s new tool can be used to output script and HTML to make your website more usable on an iPhone. Ben details the tool:

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:

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

and JavaScript to do the right thing on the iPhone:

(function(){ //Variable used to control the zoom and //position of the page when it is loaded. var viewport = { initialScale: 0.631163708086785, width: 980 }; //(-80) is for the navigation bar, otherwise you can't read it //until it is fully loaded var scrollPosition = { left: 198, top: (188-80) }; if (/iPhone/i.test(navigator.userAgent)) { // sniff //write the meta tag for the initial scale. This should //happen in the <head> section of the html page. document.write('<meta name="viewport" content="width='+ viewport.width+'; initial-scale=' + viewport.initialScale + '">'); //This loop will catch the page is loaded with out needing //to use the onLoad event. var _timer = setInterval(function(){ if (/loaded|complete|interactive/.test(document.readyState)) { clearInterval(_timer); //This will scroll the content into view, //could be enhanced with animated scrolling but less is more. //if the user started scrolling then let them handle it. if (window.pageXOffset == 0 && window.pageYOffset == 0) window.scrollTo(scrollPosition.left, scrollPosition.top); }}, 10); } })();

Homepage

iPhone, Optimization, JavaScript

Source:→ Ajaxian