17
edits
Changes
moar about screens
The touch screen resolution is 320×240. However, the viewable area in the browser is only <b>320×212</b>.
The touch screen resolution is 320×240. However, the viewable area in the browser is only <b>320×212</b>.
You can have a page span both screens. However, the browser will behave as if the bottom screen is the only active screen and the top screen is scrolled off. This is important when computing CSS coordinates. Items positioned from "bottom" will be positioned based on 220px and not the full 432px of both screens.
== Using Both Screens ==
Here's how your webpage can span both screens:
# Ensure that your page takes up exactly 320x432 pixels.
# Add the following JavaScript just before the </body> tag:
<script>document.body.scrollTop = 220;</script>
Generally the easiest way to accomplish the correct layout is to create HTML elements that "contain" the top and bottom screens. Here's an example:
<html>
<head>
<meta name="viewport" content="width=320">
<style>
body { margin: 0px; }
#topscreen { width: 320px; height: 220px; overflow: hidden; }
#bottomscreen { width: 320px; height: 212px; overflow: hidden; }
</style>
</head>
<body>
<div id="topscreen">Top Screen</div>
<div id="bottomscreen">Bottom Screen</div>
</body>
</html>
This scheme allows the page to be easily manipulated through JavaScript.