404
edits
Changes
Jump to navigation
Jump to search
Line 75:
Line 75: − − == Screen Resolution == − − The DSi screen resolution is 256x192. However, the viewable area in the browser is only <b>240x176</b>. Both screens provide the same viewable area. − − In vertical mode, 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 176px and not the full 352px of both screens. − − == Using Both Screens == − − Here's how your webpage can span both screens: − − # Use the meta tag to set vertical mode − # Ensure that your page takes up exactly 240x352 pixels. − # Add the following JavaScript just before the </body> tag: − − <script>document.body.scrollTop = 176;</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=240"> − <style> − body { margin: 0px; } − #topscreen, #bottomscreen { width: 240px; height: 176px; 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. Line 145:
Line 111: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
no edit summary
You can test this mode with the following demo page: [http://www.cashman-productions.fr.nf/dsi/ here]
You can test this mode with the following demo page: [http://www.cashman-productions.fr.nf/dsi/ here]
=== Detect User Agent ===
=== Detect User Agent ===
* Left and Right can be read only if L or R are held
* Left and Right can be read only if L or R are held
* Holding L or R disables the A button
* Holding L or R disables the A button
== Screen Resolution ==
The DSi screen resolution is 256x192. However, the viewable area in the browser is only <b>240x176</b>. Both screens provide the same viewable area.
In vertical mode, 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 176px and not the full 352px of both screens.
== Using Both Screens ==
Here's how your webpage can span both screens:
# Use the meta tag to set vertical mode
# Ensure that your page takes up exactly 240x352 pixels.
# Add the following JavaScript just before the </body> tag:
<script>document.body.scrollTop = 176;</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=240">
<style>
body { margin: 0px; }
#topscreen, #bottomscreen { width: 240px; height: 176px; 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.
== Example Sites ==
== Example Sites ==