STEW: supporting different screen sizes

STEW is designed for the 240 x 320 (QVGA) and the 360 x 640 (nHD) screen size. Separate CSS files are used to specify the user interface on each screen size. The nHD devices support touch, and therefore all buttons, text boxes, and other screen controls must be bigger so that users can use fingers or a stylus to select them. On QVGA screens, screen controls can be smaller, because users use the five way navigation pad to move between them.

Specifying styles according to screen size

The STEW example uses a CSS file called style.css to render views on nHD screens.

.button {
+	width: 116px;
+	height: 37px;
+	background: url(images/button_bg.png) no-repeat;
+	color: #ffffff;
+	font-size: 20px;
+	font-weight: bold;
+	margin: 3px;
+	padding-top: 12px;
+	display: inline-block;
+	text-align: center;	
+}
+

Another CSS file, style_small.css, is used to render views on QVGA screens.

.button {
+	width: 80px;
+	height: 25px;
+	background: url(images/small_button_bg.png) no-repeat;
+	color: #ffffff;
+	font-size: 14px;
+	font-weight: bold;
+	margin: 2px;
+	padding-top: 9px;
+	display: inline-block;
+	text-align: center;	
+}
+

References to the style sheets are added to the main.html file:

<link href="style.css" rel="stylesheet" type="text/css">
+<link href="style_small.css" rel="stylesheet" type="text/css">
+

Selecting the CSS file to use

To avoid having to iterate through all DOM elements and change their style according to the screen size and having to maintain a table of all element IDs and different styles associated to each of them, STEW switches between the two CSS files according to the screen size. The CSS file is selected at application init by adding the applyCorrectStyles helper function to the init function in the main.js file, as follows:

// Set the correct stylesheet depending on whether we are running
+// on bigger or smaller screens.
+Helper.applyCorrectStyles();
+

The applyCorrectStyles function is defined in the Helper.js file:

applyCorrectStyles: function() {
+	var largeScreen = Helper.isLargeScreen();
+	
+	document.styleSheets[0].disabled = !largeScreen;
+	document.styleSheets[1].disabled = largeScreen;
+}
+

The style sheets are embedded as elements in the widget DOM document. The applyCorrectStyles function checks the screen size and disables all the CSS rules in the style sheet that is not used.

The screen resolution could be checked to determine the screen size. However, this example uses a more general solution, which sets a threshold that separates small and large screens.

isLargeScreen: function() {
+	var size = this.getScreenSize();
+	return ( size.height > Helper.SMALL_SCREEN_TRESHOLD );
+}
+
+Helper.SMALL_SCREEN_TRESHOLD = 320;
+

This solution cannot detect all screen sizes, such as 800 x 352 pixels landscape on the Nokia E90, but it is good enough for the target devices in this example.