The Mobile Dollar: Dipping a toe into device JavaScript

I've been working on a (very) small side project that targets mobile Web Browsers. Testing for the mobile platform, however, is ludicrous: someone I met a SXSW told me that their mobile application had over four-hundred different builds. Simple applications, however, aren't terribly difficult to make, so long as you keep your focus small.

My Web app works in IE Mobile 5 and 6, Opera Mobile 8.65, Opera Mini 4 and the iPhone Simulator. A proper iPhone version would require a slightly different UI and leverage the absurdly better layout engine of MobileSafari, but this will work while I wait for lines to thin this weekend.

Opera Mobile is very good and will handle almost anything you throw at it; Opera Mini is a mysterious beast, but seems to "just work". IE Mobile, however, is a bizarre member of the device browser family, and like its desktop-sized predecessors, has some quirks:

• Both support more selectors, but far fewer CSS properties than IE 6. Luckily the IE Mobile 6 and IE Mobile 5 documentation is well done, if hard to find.
• Unobtrusive scripting is explicitly not supported. At all. If an element needs to listen for an event, it must use the onevent="" attribute in the HTML.
• Transparent PNGs and GIFs cause visual static when used as background images.
• HTMLElement#nodeName is not supported; you have to use HTMLElement#tagName.
• The getElementsByTagName method is supported only on the document object in IE Mobile 6 and not at all in IE Mobile 5. If you want to support that browser, element references must be done via IDs.

In addition, feature detection and document.getElementById are new features in IE Mobile 6. Luckily, IE Mobile 5 populates the window Object with variables named identically to element IDs, as if it could do:

var el, c = -1;
while (el = document.getElementsByTagName('*')[++c]) {
  if (el.id) {
    window[el.id] = el;
  }
}

Because IE Mobile 5 lacks feature detection, testing for this case requires some special work as well. Porting the dollar function to device JavaScript looks like the following:

var $ = (function() {
  try {
    (! document.getElementById);
      return function(id) {
        return document.getElementById(id);
      };
  }
  catch(e) {
    return function(id) {
      return window[id];
    }
  }
})();

This simplified version accepts only a string argument. It'd be a good coding exercise to rework it into accepting a string, HTMLElement or Array. Good luck!

UPDATE: The application is a very simple means to track life in a game of Magic: The Gathering. Check out the Magic Game Tracker.