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:
PLAIN TEXT
HTML:
1.
2.
<meta name="viewport" content="width=980; initial-scale=0.631163708086785"/>
3.
and JavaScript to do the right thing on the iPhone:
PLAIN TEXT
JAVASCRIPT:
1.
2.
(function(){
3.
4.
//Variable used to control the zoom and
5.
//position of the page when it is loaded.
6.
var viewport = {
7.
initialScale: 0.631163708086785,
8.
width: 980
9.
};
10.
//(-80) is for the navigation bar, otherwise you can read it
11.
//until it is fully loaded
12.
var scrollPosition = {
13.
left: 198,
14.
top: (188-80)
15.
};
16.
if (/iPhone/i.test(navigator.userAgent)) { // sniff
17.
//write the meta tag for the initial scale. This should
18.
//happen in the <head> section of the html page.
19.
document.write(<meta name="viewport" content="width=+
20.
viewport.width+; initial-scale= +
21.
viewport.initialScale + ">);
22.
23.
//This loop will catch the page is loaded with out needing
24.
//to use the onLoad event.
25.
var _timer = setInterval(function(){
26.
if (/loaded|complete|interactive/.test(document.readyState)) {
27.
clearInterval(_timer);
28.
29.
//This will scroll the content into view,
30.
//could be enhanced with animated scrolling but less is more.
31.
//if the user started scrolling then let them handle it.
32.
if (window.pageXOffset == 0 && window.pageYOffset == 0)
33.
window.scrollTo(scrollPosition.left,
34.
scrollPosition.top);
35.
}}, 10);
36.
}
37.
})();
38.
source: ajaxian
Related Stuff
-
MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.
-
Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone
-
TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support
-
ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.
-
Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.
-
Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software
- PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.
Be the first ... |Add your comment.
Your Comment ...
Name (required)
Email (required, hidden)
Website