Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

How to switch CSS styles

From Wiki
Jump to: navigation, search
Article Metadata
Article
Created: sellis (08 Mar 2007)
Last edited: hamishwillee (27 Jul 2013)

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.



This page was last modified on 27 July 2013, at 00:32.
234 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×