Wednesday, July 4th, 2007

iPhone Web Development Tips and Official Documentation Released

Category: iPhone, Mobile, WebKit

<p>iPhone Web Development Tips and Official Documentation Released

As soon as the iPhone was in developers hands on Friday they were hacking around. This involved doing a “for (var key in document)” and the like to see what was available.

In an ideal world, Apple would have released a beautiful set of documentation for the community, but they were probably too busy getting the phone out of the door (maybe can’t blame them huh).

The community has begun to document things:

Getting rid of the toolbar

You can scroll down a little, enough to get rid of the toolbar via:

javascript
< view plain text >
  1. window.onload = function() {
  2.   setTimeout(function(){window.scrollTo(0, 1);}, 100);
  3. }

but what about handling the rotation of the phone?

Updating the Layout when the user rotates

Joe Hewitt built a liquid layout that watches the the change from portrait to landscape mode.

javascript
< view plain text >
  1. addEventListener("load", function()
  2. {
  3.     setTimeout(updateLayout, 0);
  4. }, false);
  5.  
  6. var currentWidth = 0;
  7.  
  8. function updateLayout()
  9. {
  10.     if (window.innerWidth != currentWidth)
  11.     {
  12.         currentWidth = window.innerWidth;
  13.  
  14.         var orient = currentWidth == 320 ? "profile" : "landscape";
  15.         document.body.setAttribute("orient", orient);
  16.         setTimeout(function()
  17.         {
  18.             window.scrollTo(0, 1);
  19.         }, 100);            
  20.     }
  21. }
  22.  
  23. setInterval(updateLayout, 400);

Notice that there isn’t a nice event for “hey I just changed mode”. Instead, we have to poll and check the current width.

meta viewport

There is also a lot of chat about the viewport tag, and people are experimenting with getting a nice outcome when jumping between the various modes. E.g.

  1. <meta name="viewport" content="width=480; initial-scale=0.6666; maximum-scale=1.0; minimum-scale=0.6666" />

View Source

To do a lot of testing, it would help to be able to do a view source on other cool iPhone applications. this work, based on Abe’s let’s you.

Drag and drop

Everyone has been a bit frustrated with the lack of events, but between Tahoma Toelkes and Joe Hewitt, we have a drag demo that works when you do a two-finger vertical dragging motion on the phone, but only for certain elements such as textareas.

Then comes the official docs

After all of this tinkering, we finally get the official docs from Apple. They are a little sparse, and don’t seem to have much new, but at least they are out there, and they are official.

It is here that you can learn:

  • How Apple thinks you should specify an iPhone only set of style (mixed reviews on how IE handles this). The iPhone ignores the handheld profile as it thinks of itself as a desktop browser instead.
    1. <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
  • The various meta data for viewport:
    • width The default is 980. The range is [200, 10,000].
    • height The default is calculated based on the width and aspect ratio. The range is [223, 10,000].
    • initial-scale is the scale to render the page when it first loads. The default fits the page to the screen. The range is [minimum-scale, maximum-scale]. Keep in mind that the user can change the scale, either through the pinch gesture or by a double tap.
    • user-scalable determines whether or not the user can scale the page. The default is yes.
    • minimum-scale is the lower bound for scaling. The default is 0.25; the range is [>0, 10].
    • maximum-scale is the upper bound for scaling. The default is 1.6; the range is [>0, 10].
  • How to interact with the apps from JavaScript
    • Phone call: <a href=”tel:1-408-555-5555″>1-408-555-5555</a>
    • Mail: <a href=”mailto:frank@wwdcdemo.example.com”>John Frank</a>
    • Google Maps: <a href=”http://maps.google.com/maps?q=cupertino”>Cupertino</a>
  • How to embed a movie in a page (making sure to setup a preview image)
  • Making sure your text is readable
  • And much more.

The documentation states that Safari for iPhone is your good old Safari, however there seem to be a LOT of differences in practice, and it has been said that the codebase was forked some time ago.

More information on iPhone Development

I recommend hanging out on the iPhoneWebDev group, and we are excited to have Joe Hewitt himself speak at The Ajax Experience in a few weeks, all about his experience with the iPhone, and what he has learnt.

Related Content:

Posted by Dion Almaer at 12:17 am
15 Comments

++++-
4 rating from 51 votes

15 Comments »

Comments feed TrackBack URI

In my brief visit to the apple store this afternoon, I noticed that the iPhone seems to be running Safari 3, or some subset thereof. In particular, it has the Safari 3 browser’s support of some CSS 3 functionality.

Comment by don hosek — July 4, 2007

They almost beat your post, but not quite:

http://developer.apple.com/iphone/

Isaiah

Comment by Isaiah — July 4, 2007

Is there a program to simulate the view of the iPhone on a PC? Meaning, is there a way to view an application designed for an iPhone without owning an iPhone?

Comment by justin — July 4, 2007

I think we should havethe iPhone to view the application.

Comment by Lemon — July 4, 2007

The document released by Apple this week only tells the beginning of the story of how to optimize web pages for the iPhone and develop webapps. The http://www.iPhoneWebDev.com developer community has been working hard to fill in the gaps of missing information. Since Friday we’ve figured out some best practices for viewport settings, discovered how to hide the URL bar to make more space available to web apps, how to detect orientation changes (portrait to landscape and back), tested AJAX and javascript performance, and have made progress on quite a few issues and work arounds for a number of bugs. If you are an iPhone web coder, check out our list archives, examples, and come join our community of developers helping developers!

Also, many of us are participating in this week’s barcamp-style http://www.iPhoneDevCamp.com this Friday in San Francisco. We hope to see many AJAXian faces there!

Comment by Christopher Allen — July 4, 2007

The browser on the iPhone might be Safari 3, but don’t count on it being the same thing available for Windows. For example, the following test passes in Safari 3 beta on Windows, fails Safari 2, and fails on the iPhone.

http://web.mit.edu/jwalden/www/test-array.html

Basically, the bug is that |prop in jsArray| should return false only if prop is not present on jsArray, but Safari 2/iPhone is buggy and returns false for that if jsArray[prop] is explicitly set to the value undefined. I too suspect some forking and non-merging of recent-ish changes (this has only been fixed since March 28 in trunk webkit).

Comment by Jeff Walden — July 5, 2007

Yeah! More browser incompatibilities and “making apps specific for one kind of browser”. Thanks Apple!

Comment by Andy — July 5, 2007

Rather than polling, it seems that if you bind to the ‘onresize’ event, it will fire when you rotate the iPhone. So for the above example, you can delete this line:

setInterval(updateLayout, 400);

and add this line instead:

addEventListener(‘onresize’, updateLayout);

It works on my iPhone, anyway. ;-)

Comment by Paul Colton — July 5, 2007

Steve Jobs is insane if he thinks I’ll waste more than 2 minutes of my time trying to make my code pretty for an iphone. I’m seeing another “3% of the market” in the iphones future. AFAIC, he’ll be getting POHM. (plain ole html markup).

Comment by Ivan — July 5, 2007

That’s a very innovative way by Joe to check landscape vs portrait. we can take it further and make it a custom event that fires off to any subscribers. That would seem pretty ideal :)

Comment by Dustin Diaz — July 5, 2007

Sorry, this is just killing me… the sample for determining landscape v. portrait is sorta silly, as it hardwires an assumption of screen dimensions (future iphones will likely have different screen widths and/or heights).

// also fixing “profile” to “portrait”
var orient = window.innerWidth

Comment by jL — July 6, 2007

iPhone Web Developer Tool

http://www.manifestinteractive.com/iphone/

This application allows you to use your iPhone for Web Developing. You can View Source, Find on Page, Outline Divs & Tables, etc. Similar to the Firefox Web Developer Extension. Simply drag bookmarks into the web browser that you have your iPhone or iPod Touch synced to and you’re good to go. Works on any site.

Let me know what you think. If you have stuff you want added just let me know.

- Peter Schmalfeldt

Comment by Peter Schmalfeldt — November 21, 2007

That’s excellent iPhone Web Development Tips and Official Documentation Released ,The document released by Apple this week only tells the beginning of the story of how to optimize web pages for the iPhone and develop webapps, http://www.cyberdesignz.com/ , you can get more information from this

Comment by Cyber100 — January 1, 2009

I agree with Cyber100. The document released by Apple this week is worthwhile as it y tells about the beginning of the story of how to optimize web pages. http://www.cyberdesignz.com can be an alternate source to get information regarding this topic.

Comment by ReverseMortgage — August 17, 2009

We are developing a small web application using html and javascript. How can we handle to user pressing the “go” key while a text box is highlighted/ edited by the user.

Comment by sam3000 — December 11, 2009

Leave a comment

You must be logged in to post a comment.