Resources Mobile Browsers

Error: JavaScript is needed to render this site: please enable it.

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

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

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:

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

The lower-end Opera Mini browser [get it can work on many low-end devices because it uses Opera servers to parse web pages: what the servers down­load to mobile devices is simplified and compressed.

Opera Mini works on a long list of Java-based and BlackBerry phones.

Opera Mini compares well with PC versions of Opera, but it is implemented differently, so rendering differences are inevitable. Designers can use emulators on PCs to test sites for Opera Mini compatibility: there is an emulator for Opera Mini 4.2, and another for Opera Mini 6.

Opera Mobile

The higher-end Opera Mobile browser [get it works on fewer mobile devices because it is newer, and because it needs a higher-end device such as a smartphone.

There is an emulator for Opera Mobile. Designers can also use PCs to test pages using a standard PC version of Opera: simply resize the browser canvas and the font to those found on a mobile device. For your convenience the Browser News offers designers a page to set various canvas sizes.

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:

Engine Browser Percentage
Gecko Firefox  
Presto Opera Mini 18.81
Opera Mobile 0.48
Internet Explorer IE6 0.16
IE7 0.25
WebKit Android 16.04
Blackberry 2.68
Dolphin 0.18
Safari 55.55
Other NetFront 0.25
Symbian 4.70
Other 0.27

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:

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

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:

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:

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:

See Also

For more information, see:

 

 Top of Page   Legal Notices 

Logo