Join Now
Quality Rating:
  • Currently 0.0 / 5
(0.0 / 5 - 0 votes cast)
Expertise Level:
  • Currently 0.0 / 5
(0.0 / 5 - 0 votes cast)

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

How to switch CSS styles

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.



Related Discussions
Thread Thread Starter Forum Replies Last Post
how to switch off backlight pemanently? sreenivasuluy General Discussion 0 2004-01-21 16:29
Switch off the sidetone in 6630 gszopa General Discussion 0 2005-10-25 08:22
can we run multiple versions of an sdk!(s40) corroded Mobile Java Tools & SDKs 4 2005-06-23 01:51
No caching Nokia_Archive Browsing and Mark-ups 2 2006-11-10 17:40
S60 Widget specification meetashish Widgets and Widsets 4 2008-05-02 07:24
 
Powered by MediaWiki