Mobile HTML5

Chapter 13. Targeting Mobile Devices and Touch

You’ve hopefully realized by now that your markup for the mobile browser is the same code as the desktop browser. The main differences are the size of the viewport and how the user interacts with their device. On the desktop we use a keyboard and mouse, with a large screen and resizable browser. On touch devices, we use our chubby little fingers, sometimes on tiny little screens, in viewports that are generally not resizable.

Those were generalizations! I have a desktop computer with a 23-inch touchscreen. I also have a tablet with an external Bluetooth keyboard and mouse. All our web content needs to be accessible via touch and mouse on large monitors and tiny screens. Whenever we develop, we need to remember that not everyone is accessing our content in the same way.

Scaling Down to Size

When it comes to smaller viewports, we want the width of our site to be the width of the device. The default page rendering size for most mobile browsers is 980 px wide. That is generally not the width of the device.

Until @viewport is supported everywhere, we can use the viewport <meta> tag. This tag is ignored by desktop browsers:

<meta name="viewport" content="width=device-width;"/>

There are several possible values for the content attribute of the viewport <meta> tag. Unless you are developing an interactive, time-sensitive game, this is the viewport you should include. Your users should be allowed to scale the page up and down. The preceding code ...