Targeting the mobile platform

The latest and greatest version of Opera Mobile (version 12) has just been released, which includes support for lots of HTML 5 goodies, including WebGL. While it usually works great, I noticed that many sites, HTML apps and demos have not really been designed for the mobile platform. In this post I will try to cover two important factors to keep in mind if you want your HTML5 / WebGL app to work well on a mobile device:

1. Adapt the viewport size/scale to the mobile screen.
2. Support touch input.

(I was originally planning to write up some notes on WebGL performance and precision considerations too, but I’ll save that for a later post).

Viewport size

Mobile browsers are quite different from traditional desktop browsers when it comes to how the page size is handled. Instead of using a page width equal to the browser window width, mobile browser typically use a virtual page size that is much larger than the mobile screen, and let the user zoom in and out to be able to both get an overview of the page and easily focus on the interesting parts.

When you make a game or demo, you typically want to fit your canvas/page to the screen of the mobile device and disable zooming. This serves two important purposes:

1. User interaction is much easier if you don’t have to pan around to see the entire screen and find buttons etc.
2. Performance! You don’t want to render more pixels than you need, especially on a mobile device with limited GPU & CPU performance.

The solution is to use the viewport meta tag, like this (for instance):

<meta name="viewport" content="width=device-width,
 maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi">

Doesn’t look too cryptic, does it? Perhaps worth explaining though is the target-densitydpi=device-dpi argument. It basically tells the browser to bypass any zoom settings and use a 1:1 mapping of your pixels onto the screen (most browsers use a zoom factor > 100% on devices with high pixel densities).

You can find a very good description of how it works here: An introduction to meta viewport and @viewport. The viewport meta-tag is supported by all mobile browsers that I have tried (Opera Mobile, Android browser and Firefox for Android).

Here is an example page with and without the meta viewport tag:

• No meta viewport
• With meta viewport

You should be able to spot the difference quite easily on a mobile device. E.g. try to zoom both versions of the page.

Touch input

Typically when you design an interactive web app, you add support for mouse and/or keyboard input. Unfortunately, that is not of much use on a mobile device. What you want is to use touch input events instead.

Essentially, you use addEventListener to catch touchstart, touchmove and touchend events. In the JavaScript event handler you get an array of touch positions (yes – full multi touch support), each containing the properties clientX and clientY. For instance:

function touchHandler (e) {
  e.preventDefault();
  for (var i = 0; i < e.touches.length; i++) {
    var pos = e.touches[i];
    // Do something cool with pos.clientX, pos.clientY ...
  }
}

function init() {
  var c = document.getElementById("canvas");
  c.addEventListener('touchstart', touchHandler, false);
  c.addEventListener('touchmove', touchHandler, false);
  c.addEventListener('touchend', touchHandler, false);
}

With this information, you can easily map touch events to your in-game UI elements or click on or aim at objects in a 3D world, for instance.

Here is a simple example: touch events. Touch on the screen, and the HTML 5 logo should move to that position.

The recently released Opera shiny demos also has a nice example of touch input: Touch tracker.

Now, let’s make some great mobile apps!