Both iOS and Android browsers are based on WebKit (http://www.webkit.org/). These browsers, and a growing number of others (Opera Mobile, for example), allow the use of a specific meta viewport element to override that default canvas shrinking trick. The <meta> tag is simply added within the <head> tags of the HTML. It can be set to a specific width (which we could specify in pixels, for example) or as a scale, for example 2.0 (twice the actual size). Here's an example of the viewport meta tag set to show the browser at twice (200 percent) the actual size:
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
Let's stick that into our HTML as done in the following code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
<title>And the winner isn't…</title>Now, we'll load that page up in Android and see how it looks:
As you can see, this isn't exactly what we're gunning for but it illustrates the point, in a big way!
Tip
Getting the iOS and Android emulators
Although there is no substitute for testing sites on real devices, there are emulators for Android and iOS. Android emulator for Windows, Linux and Mac is available free by downloading and installing the Android Software Development Kit (SDK) at http://developer.android.com/sdk/. It's a command line setup; so not for the faint hearted. The iOS simulator is only available to Mac OS X users and comes as part of the Xcode package (free from the Mac App Store). Once Xcode is installed, you can access it from ~/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications iOS Simulator.app.
Let's break the above <meta> tag down and understand what's going on. The name="viewport" attribute is obvious enough. The content="initial-scale=2.0 section is then saying, scale the content to twice the size (where 0.5 would be half the size, 3.0 would be three times the size and so on) whilst the width=device-width part tells the browser that the width of the page should be equal to device-width.
The <meta> tag can also be used to control the amount a user can zoom in and out of the page. This example allows users to go as large as three times the device width and as small as half the device width:
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
You could also disable users from zooming at all, although as zooming is an important accessibility tool, it's rare that it would be appropriate in practice:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
The user-scalable=no being the relevant part.
Right, we'll change the scale to 1.0, which means that the mobile browser will render the page at 100 percent of its viewport. Setting it to the device's width means that our page should render at 100 percent of the width of all supported mobile browsers. Here's the <meta> tag we'll be using:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
Looking at our page on an iPad in portrait mode now shows the content being clipped but not as if we are looking through a pair of jam-jar spectacles! This is how we want it at this point. This is progress, trust me!
Note
Noticing that the viewport meta element is seeing increasing use, the W3C is making attempts to bring the same capability into CSS. Head over to http://dev.w3.org/csswg/css-device-adapt/ and read all about the new @viewport declaration. The idea is that rather than writing a <meta> tag in the <head> section of your markup, you could write @viewport { width: 320px; } in the CSS instead. This would set the browser width to 320 pixels. Some browsers already support the syntax (Opera Mobile, for example), albeit by using
their own vendor prefix; for example, @-o-viewport { width: 320px; }.