Using multiple stylesheets to support a variety of devices (Web Runtime)
From Symbian Developer Community
 |
| ||||||||||||
Problem
Widget developers often face a problem in supporting multiple devices. For example, consider writing a widget to run on the following three devices:
| Samsung i8910 HD | Large touch-screen, no keyboard |
|---|---|
| Nokia E71 | Standard size landscape screen (no touch support), full QUERTY keyboard |
| Nokia N96 | Standard size portrait screen with orientation change, numeric keypad. |
The three phones are quite different. The challenge for a widget developers is to find a balance between object size and user interaction:
- Object size - smaller controls mean more can fit on the smaller screens
- User interaction - small controls may be hard to touch on touch screen devices
Solution
One way of overcoming this problem to is maintain two separate stylesheets - one for large-screen touch capable devices, and the other for devices that use keyboard based navigation. Selecting a stylesheet at run time can be done based on screen size as follows.
First, we declare a stylesheet in our index.html:
<head>
<!-- existing head section code -->
<link rel="stylesheet" href="WRTKit/Resources/UI.css" id="stylesheet" type="text/css">
<!-- existing head section code -->
</head>
Now we have a stylesheet element we can access by ID and then modify. Here is how we do it from javascript.
function setStylesheetForScreenSize(){
// Check both width and height because screen orientation can change any time...
if (window.innerWidth > 400 || window.innerHeight > 400) {
// hi res screen, use large font
document.getElementById('stylesheet').href = 'WRTKit/Resources/UI-large.css';
}
else {
// lo res screen, use small font
document.getElementById('stylesheet').href = 'WRTKit/Resources/UI.css';
}
}
This function should be called in response to onResize event, e.g in your html:
<body onLoad="javascript:Init();" onResize="javascript:setStylesheetForScreenSize();">
 | Tip The large-view CSS file - including full dual-size theme is available in the attached example. |
Variants and Extensions
This example demonstrates stylesheet replacement with a WRTKit theme. The same principle can be used regardless of whether the application uses WRTKit.
Summary
Replacing a stylesheet is an easy way to make your widget look great and work well on a variety of devices.
Related Info
Comments
Sign in to comment…
