Designing for dynamic screen orientation

Some S60 devices support screen rotation. On these devices, applications can be displayed in portrait or landscape orientation.

Screen rotation can be supported in the following ways:

You can add a menu option to your widget that enables the user to rotate the UI.
Some devices support rotation in response to a user action such as opening a cover or moving a slider. For an example, see STEW: supporting screen rotation.
Some devices enable software developers to use widget object methods to programmatically rotate the screen.

Combine the JavaScript onResize DOM event handler with the height and width properties from the window and screen objects to calculate the effective area or viewport available for a widget. See the Viewport widget for an example of how to determine the effective viewport size.

Rotation and softkey styles

In the landscape orientation, the softkeys can either be placed on either side of the display or at the bottom of the display. In the bottom softkey style, the layout is stretched horizontally to fit the screen, leaving the softkeys below the screen as in portrait orientation. Touch devices do not support the bottom softkey style. Design widgets to work in both portrait orientation and landscape orientation with side softkeys.

Figure: Page layout in portrait and landscape

Note: The WRT environment adjusts the softkey labels.

To add a rotation command to the options menu

Add a rotation option to the options menu.
For more information, see Using softkeys.
Create the code for the menu option. Check that the device supports screen rotation and use widget object methods to change the screen orientation.
For example, the following code changes the orientation to landscape if the screen height is less than the screen width:
```
if (widget.isrotationsupported)
+
+// Change the screen orientation
+
+var h = window.screen.height;
+var w = window.screen.width;
+ 
+if (h < w)
+  widget.setDisplayLanscape();
```