Tuesday, March 25th, 2008
iPhone Optimization Script
Category: iPhone, JavaScript
, Usability
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:
-
-
<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);
-
}
-
})();
-
Related Content:
Good thinking. Well done
Neat, but resizing and repositioning to a column isn’t really a chore, just a matter of double tapping, no?
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.
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.
I don’t think this guy knows about the double-tap. This is some serious over-engineering.
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.
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.
Good find, it’s small touches like these that make a site stand out amidst the crowd.
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.
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.
This is not a good idea, I think with a different screen size it will all start to go wrong