|
Written by Chris Gountanis
|
|
 Increasingly, web-enabled devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity. In particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height. There are two ways to deal with orientation information in Gecko. The first is the orientation media query. This lets content adjust its layout using CSS, based on whether the device is in landscape mode (that is, its width is greater than its height) or portrait mode (its height is greater than its width).
default.htm
<html>
<head>
<link rel="stylesheet"
media="all and (max-device-width: 480px)
and (orientation:portrait)" href="/mobile-portrait.css">
<link rel="stylesheet"
media="all and (max-device-width: 854px)
and (orientation:landscape)" href="/mobile-landscape.css">
<link rel="stylesheet"
media="all and (min-device-width: 1024px)" href="/full.css">
</head>
<body>
Sample Text<br />
<script>
document.write(screen.width + ' x ' + screen.height);
</script>
</body>
</html>
mobile-portrait.css
body {
color: red;
font-size: 30px;
}
mobile-landscape.css
body {
color: blue;
font-size: 60px;
}
full.css
body {
color: black;
font-size: 100px;
}
Download Sample Code |
|
Last Updated on Thursday, 30 September 2010 11:57 |
Programming 