Resources ⮞ Mobile Browsers

Caution : this page is a work in progress, incomplete and subject to errors and revisions. There is no point in anyone reading this page at this time.

Many pages or sites should be made compatible with leading mobile browsers, which now offer excellent support of HTML, CSS, and JavaScript standards, including CSS 3 media queries, making it more feasible to craft pages which work well on devices from tiny to titanic, using HTML and CSS only — or using HTML and CSS with just a dab of JavaScript — to adapt to a wide range of screen sizes.

This page discusses:

• Capable Mobile Browsers
• Mobile Browser Stats
• Media Query Tribulations
• Detecting Small Screen Devices
• Small Screen Design
• See Also

Capable Mobile Browsers

This focuses on making pages which adapt to all devices, not on making pages which work only on small screen devices. And because it is far easier to make sites compatible with mobile browsers which are comparable to PC browsers, this discussion focuses on the more capable mobile browsers. In any case, primitive browsers will fade away as better browsers become more common.

Mobile browsers which are comparable to modern PC browsers include:

• Gecko-based browsers
• Opera browsers
• WebKit-based browsers

Gecko-Based Browsers

Gecko runs on few mobile platforms: Firefox for Mobile, also known as Fennec [get it⮞, was released only in Jan 2010, and only for a few higher-end mobile devices. The number of devices will increase with time, but most people now use the more mature Opera and WebKit browsers.

Firefox for Mobile is available for:

• Some Android phones
• Apple iPhone

There is an emulator for Firefox for Mobile, but this author has found it to be utterly useless. It is probably better to use Firefox or some other Gecko browser as an emulator: simply resize the browser canvas and the font to those found on mobile devices. For your convenience the Browser News offers designers a page to set various canvas sizes.

Opera Browsers

Opera has two families of mobile browsers: Opera Mini and Opera Mobile.

Opera Mini

Opera Mobile

Webkit-Based Browsers

Apple’s WebKit browser engine is being used more and more to power browsers for higher-end devices. Android uses it. Apple uses it for several of its products, including its iPhone and iPad; and companies like Google, HTC, Motorola, Nokia, Palm, RIM, Samsung, and Sony Ericsson use the WebKit for their newer smartphones.

There is at least one browser — Bolt — which uses servers to parse web pages, enabling Bolt to work on lower-end phones.

There is a long list of WebKit-based browsers, many of which run on mobile devices, with more on the way.

The WebKit engine is capable, mature, and open source: it may become the predominant engine for small-screen devices such as smartphones, eBook readers, and tablet computers, though Opera is equally capable.

Mobile Browser Stats

The great majority of mobile browsers use either the WebKit or Opera browser engines, though Firefox and Internet Explorer may become important in the future. There are a few legacy browsers, e.g. older versions of the Blackberry browser, but these are being phased out.

Here are the stats for September 2011:

Media Query Tribulations

Media queries are supported by modern versions of the Gecko, Opera, and WebKit engines, as well as by IE9.

One source of possible confusion is that media queries may refer to three types of pixels: Device Pixels, Device Independent Pixels, and CSS Pixels:

• Device Pixels

  Device Pixels are are the device’s true physical pixels, the pixels typically flaunted in ads. For example, iPhones 1–3 have a true size of 320×480 device pixels, and the iPhone 4 has a true size of 640×960. Here are the true sizes of screens of some higher-end mobile devices, measured in device pixels and in inches:

  Vendor	Device	Pixels/ inch	Width		Height
  			px	in	px	in
  Amazon	Kindle 1–2	167	600	3.59	800	4.79
  	Kindle 2DX	150	824	5.49	1200	8.00
  Apple	iPhone 1–3	163	320	1.96	480	2.94
  	iPhone 4	323	640	1.96	960	2.94
  	iPad	132	768	5.82	1024	7.76
  Nokia	N97	209	360	1.72	640	3.06
  	N900	267	480	1.80	800	3.00
  RIM	Blackberry Torch	188	360	1.92	480	2.56
  	Playbook	170	600	3.53	1024	6.02
  Samsung	Galaxy Plus	170	600	-	1024	-

  Some devices use device pixels in their device-width and device-height media queries. Other devices instead use device independent pixels (see below) for these media queries.

  Device Independent Pixels

  Device Independent Pixels (dips) — so-named by Google (other vendors may use other names) — are a multiple of device pixels. Device independent pixels may be used, instead of device pixels, by a device’s media queries so that a new device may resemble an older device in the media query, making the new device work more like its progenitors. For example, if a device independent pixel for the iPhone 4 — which has double the resolution of older iPhones — consisted of four device pixels, all iPhones would have the same device-width, 320 pixels, and the same device-height, 480: this would help ensure that pages look the same on both new and old iPhones, despite differences in device pixel sizes. NB : some devices have device independent pixels which are a non-integer multiple of device pixels: for example, device independent pixels which are 1.5 device pixels in size.

• CSS Pixels : these are the pixels used in CSS declarations, e.g. in width:300px; they are also used in media queries which use the width or height properties. The true size of these pixels depends on zooming, with CSS pixels growing when zooming in, and shrinking when zooming out. Pages which use CSS to set dimensions never have to be concerned with whether a page is zoomed, or by how much.

Another source of possible confusion is that browsers may use fictitious dimensions in some queries. For example:

• Many browsers equate inches to 96 CSS pixels, no matter how big the pixels truly are. This means that any media query which uses inches or centimeters as units will almost certainly produce incorrect results.

• Many browsers, including Safari on the iPhone, use not the true width and height of the mobile device, but instead use the viewport width and height, which is a fictitious resizable rectangle — often larger than the true size of the device — analogous to the browser window in a PC browser. Pages are rendered within the viewport. For example, the media query may see a width of 960 CSS pixels, even when the actual width is (say) 320 CSS pixels. This also means that any media query which uses the width or height property will almost certainly produce fictitious results, though this is normal: the width and height for these properties are defined as the viewport width and height, and can vary in actual size.

  Note that the mobile browser will have a default viewport size, that this size can be set using a meta tag, and that users can typically resize the viewport to make pages render better on their device.

  Apple created a non-standard meta tag, <meta name="viewport" …>, to enable the designer to specify details such as the viewport size for a page, to make the page appear optimally on an Apple mobile device. This meta tag has been adopted by other makers of mobile devices, hence has become a de facto standard. For details on its use, see Configuring the Viewport and CSS Device Adaptation. Designers might use this meta tag to specify different viewport sizes for different pages, with the size chosen to optimize the appearance of each individual web page.

• As discussed above, many browsers use not the true device width and height in device-width or device-height in media queries, but instead use device independent pixels.

NB : the browser may not be able to use the full screen because, on many mobile devices, part of the screen is used by the operating system. For example, with iPhones 1–3, the screen is 360×480 device pixels, but the top 20px are used by Safari to report the cellphone status, the next 60px is for the URL, and the bottom 44 pixels are used for a button bar. For more about this, see Layout and Metrics on iPhone and iPod Touch. A different browser, even on the same mobile device, may reserve a different amount of the screen.

Detecting Small Screen Devices

There are three potential means of detecting small screen devices:

• Media Rules
• Media Queries
• Javascript Detection

Using media queries is the best approach to making pages which work both on modern desktop and mobile browsers, which is the focus of this page.

Media Rules

CSS 2 provides a mechanism for crafting CSS for mobile devices, using media rules: with media rules it is possible, in principle, to load CSS files which are visible only to “handheld” devices. Browser support for media rules for handheld devices, however, is almost non-existent, so this mechanism is essentially useless.

Media Queries

CSS 3 provides a more powerful mechanism for crafting CSS for mobile devices, using media queries: with media queries it is possible to load CSS files only if certain conditions are met, e.g. only if the screen width is less than 481px. Browser support is, fortunately, quite widespread: media queries are honoured by modern Gecko, Opera, and WebKit browser engines, as well as by Internet Explorer 9.

For example, this loads mobile.css only if the device has a screen with a width of 480px or less:

<link type="text/css" href="mobile.css" rel="stylesheet" media="only screen and (max-width:480px)">

This does the same, but incorporates a media rule to also load the page if the device is a handheld device, thereby adding support for any handheld device which supports CSS 2 media rules:

<link type="text/css" href="mobile.css" rel="stylesheet" media="handheld, only screen and (max-width:480px)">

A limitation of media rules is that they allow only simple Boolean expressions, using and or not. Read the CSS 3 Media Queries document for details.

Javascript Detection

JavaScript detection should be avoided as much as possible, but sometimes it is helpful or unavoidable.

One method of detecting mobile devices is to check for properties of the devices, e.g. the screen width. The following function, isMobileDevice(), returns true iff the screen width is less than or equal to the argument width, with the default width being 480 pixels.

function isMobileDevice ( width )
{
width = width || 480;
return (typeof(window.innerWidth) != 'undefined') && (window.innerWidth <= width);
}

Another method would be to use a browser sniffer which analyzes the userAgent string. This, however, is very unreliable, fraught with limitations. For example, some companies have sniffers which wrongly identify some desktop users as mobile users, which has resulted in these desktop users being wrongly served mobile-specific pages: this has frustrated and angered users. Browser sniffers are therefore not considered here.

Small Screen Design

This section focuses on design issues related to the small screen devices.

Range of Screen Sizes

As with PCs, there are many mobile screen sizes: some very tiny; some so big that they rival some PCs; and many in between. And many mobile devices can work either in either portrait mode or, rotated 90°, in landscape mode, hence support two resolutions, for example:

• 320×480px or 480×320px (e.g. Android, Apple iPod Touch, Apple iPhone)
• 480×800px or 800×480px (e.g. Nokia N900)
• 768×1024px or 1024×768px (e.g. Apple iPad)

The variety of sizes means that it may make sense to design for several size ranges: for example for 480px wide and under; for 481―800; and for 801 and up. Mobile devices with large screens, such as tablets, may very well be treated just like laptop or desktop PCs, especially when fluid design is applied.

Fluid Design

Fluid design can make pages adapt to a variety of sizes, but it may be necessary to use different stylesheets, loaded by media queries, to cope with extreme sizes: indeed, media queries can be viewed as just another means of enabling fluid design to adapt to a vaster variety of sizes.

Note that using media queries can be useful for more than coping with small screen sizes: it can also be used for coping with very large window sizes. For example, media queries could be used to load stylesheets for very wide PC windows whereby text is made to flow in two or three columns which would normally appear in just one. Such a technique will prove more valuable as more people use very wide screens, and more browsers support CSS3 multi-column styles.

Having different stylesheets for different sizes can make page design more complex, but the complexity can be minimized by honouring fluid design principles: the extra stylesheets loaded for large or small screens should be very small, merely overriding a few styles in the standard stylesheet(s).

Menus

A challenging issue is menus. Mobile devices have screens which often have no room for full menus, especially dropdown menus with many menu items.

One way to cope with this is to avoid dropdown menus on small screen devices: instead of a user pointing to a top-level menu item which reveals a subsidiary, dropdown menu, a user could instead click on the top level menu item to go a page containing exactly the same choices as would appear in the dropdown menu. Indeed, this designer already applies this technique in another situation: CSS-based dropdown menus using :hover won’t work with older versions of Internet Explorer, and a bit of JavaScript is needed to overcome this; but this designer also lets the user click on (instead of hover over) the top level menu item, and clicking it goes to a page with the same choices as would appear in the dropdown menu, so someone with an old version of Internet Explorer can still use the menus even if JavaScript is disabled. All users, therefore, are supported. Applying this same technique to small screen devices is very simple.

Coping with menus with long lists of menu items is harder: horizontal menus may not fit on one line, and vertical menus may take up more horizontal space than is desirable. Indeed, this can even be a problem with PCs with small browser windows. Ways to deal with this include: allowing horizontal menus to take up several lines; switching vertical menus to horizontal menus for small screen devices; reducing the number of menu items; or — more drastically — hiding menus on small screen devices, displaying a single menu item, “Menu”, which provides access to the menu choices either by revealing a dropdown menu, or by going to a separate menu page.

Range of Needs

One design issue is that someone with a mobile device may have different needs than someone with a PC. For example, someone with a mobile device may have a strong need to find people or places: this would make contact information and maps more important, and might make lengthly text less important. Ask the question “what do people on the go need most from my site?” and design the site with menu and content which helps meet these needs.

At some point it may become useful to create some pages which are specifically for those with mobile devices. This designer has, for example, made sites which automatically adapt to these devices, but has also created a few pages optimized for mobile devices which give often needed information with minimal downloads. Creating pages specifically for these devices isn’t discussed here, however, as this page focuses on making pages which automatically adapt.

These are specific examples of things this designer has done to cope with different needs of mobile devices:

• Hidden menu choices of little interest to those with mobile devices: some menu choices may not be important to a mobile user.
• Hidden content of little interest to those with mobile devices: this may apply to text, but especially applies to decorative graphics.
• Collapsed sidebars, so that PC users will see content within sidebars, but mobile users will see the content in-line.
• Collapsed columns, so that PC users will see content in multiple columns, but mobile users will see the same content in a single column.

See Also

For more information, see:

• Apple: Configuring the Viewport
• Apple: User Experience Coding How-To’s for Safari on iPhone
• Quirksmode.org: A pixel is not a pixel is not a pixel
• x: y