Categories: Browsing | HTML | JavaScript/ECMAScript | Nokia Web Browser | Code Examples | Web Technology

This page was last modified 19:36, 6 March 2008.

From Forum Nokia Wiki

This "How to" article functions as a workaround in cases where the header agent is not supplied by the browser. With the OOS 3.0 full web browser (Nokia Web Browser) - the browser does not supply this information. Later versions of the Browser are likely to make that declaration.

The Nokia Web Browser renders Web pages in their full layout and utilizes a MiniMap feature for efficient use of a large Web page. However, sometimes it may necessary or feasible to recognize that the user is using a mobile browser. This information can be used for various purposes, for example:

• Providing an alternative CSS stylesheet (for an alternative layout or text sizes, for example):
  • Omitting elements or objects from the page shown on the mobile browser
  • Providing an alternative navigation
  • Offering lighter versions of graphics to reduce download speeds

First declare the alternative styles:

<link rel="stylesheet" href="styles/main.css" 
type="text/css" media="all" title="Main">
<link rel="alternate stylesheet" href="styles/mobile.css" 
type="text/css" media="all" title="Mobile">

Functionality is implemented with JavaScript objects (screen.width, screen.height) that detect if the user is using a QVGA-sized browser. After the detection, the browser is instructed to use an alternative CSS stylesheet. Upon initial page loading, the page uses the getScreenSize function to check the display size on the mobile device:

if(getScreenSize(240, 320)) {
		generateMobinav();
		setActiveStyleSheet('Mobile');
	}
If the mobile display size corresponds to the setting (in this case, QVGA),
 the page generates the additional navigational tool (function 
generateMobinav) and automatically switches the page to use the Mobile 
stylesheet. The function below loads the alternative stylesheet (note that
the name of the stylesheet is used as an argument and originates from the 
function call). 
 
/* =v==== STYLESHEET SWITCHER =====v= */
 
function setActiveStyleSheet(title) {
 
	if(document.getElementsByTagName) {
 
	var i, a, main;
 
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
 
		if(a.getAttribute("rel").indexOf("style") != -1 && 
a.getAttribute("title")) {
 
	a.disabled = true;
 
		if(a.getAttribute("title") == title) a.disabled = false;
			}
		}
	}
	return false;
}

Note that if you decide to use an alternative layout for the mobile browser, let the user know it and provide him or her with the possibility to switch to the full version.