If the difference in screen size on the target devices is large (for example, 240 x 320 and 360 x 640), you can use separate CSS files to specify the user interface for each screen size. This also allows you take touch support into consideration. On touch devices, make buttons, text boxes, and other screen controls big enough for users to select them with fingers. On other devices, screen controls can be smaller, because users use the five way navigation pad to move between them.
+Use JavaScript to determine which CSS file to select on a particular device.
+For an example of using multiple CSS, see STEW: supporting different screen sizes.
+Create CSS files that specify styles for different screen sizes.
For example, style.css to render views on 360 x 640 screens and style_small.css on 240 x 320 screens.
Add references to the style sheets to the main.html file.
<link href="style.css" rel="stylesheet" type="text/css"> +<link href="style_small.css" rel="stylesheet" type="text/css"> +
Create JavaScript to select the style sheet according to screen size:
// Set the correct stylesheet depending on whether we are running +// on bigger or smaller screens. +Helper.applyCorrectStyles(); +
applyCorrectStyles: function() {
+ var largeScreen = Helper.isLargeScreen();
+
+ document.styleSheets[0].disabled = !largeScreen;
+ document.styleSheets[1].disabled = largeScreen;
+}
+Create JavaScript to determine screen size:
isLargeScreen: function() {
+ var size = this.getScreenSize();
+ return ( size.height > Helper.SMALL_SCREEN_TRESHOLD );
+}
+
+Helper.SMALL_SCREEN_TRESHOLD = 320;
+