iPhone Web Development Tips and Official Documentation Released

[ReVan]

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:
   1.
   2.
      window.onload = function() {
   3.
        setTimeout(function(){window.scrollTo(0, 1);}, 100);
   4.
      }
   5.

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

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.

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

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.

      HTML:
         1.
         2.
            <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
         3.

* The various meta data for viewport:
o width The default is 980. The range is [200, 10,000].
o height The default is calculated based on the width and aspect ratio. The range is [223, 10,000].
o 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.
o user-scalable determines whether or not the user can scale the page. The default is yes.
o minimum-scale is the lower bound for scaling. The default is 0.25; the range is [>0, 10].
o 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
o Phone call: <a href="tel:1-408-555-5555">1-408-555-5555</a>
o Mail: <a href="mailto:frank@wwdcdemo.example.com">John Frank</a>
o 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.