1
edit
Changes
Jump to navigation
Jump to search
mLine 80:
Line 80: − + − + − + Line 119:
Line 119: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − * [http://dsipaint.com DSiPaint]
Socialcu.be does not have https
To active the vertical mode automatically, add one of the following tags between <head></head> :
To active the vertical mode automatically, add one of the following tags between <head></head> :
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=240" />
<meta name="viewport" content="width=240">
Using device-width will adapt the page to the width of other mobile devices.
Using device-width will adapt the page to the width of other mobile devices.
You can test this mode with the following demo page: [http://www.cashman-productions.fr.nf/dsi/ here] (link dead as of 06/2010)
You can test this mode with the following demo page: [http://dsipaint.com DSiPaint].
=== Detect User Agent ===
=== Detect User Agent ===
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.
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 type="text/javascript">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 type="text/css">
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 ==
<!-- If you have a website that demonstrates these techniques, place it here! -->
<!-- If you have a website that demonstrates these techniques, place it here! -->
* [http://dsipaint.com DSiPaint]
* [http://socialcu.be SocialCu.be]
* [http://www.dsicade.com DSiCade]
* [http://www.dsicade.com DSiCade]
* [http://hullbreachonline.com/ds HullBreach Online Lite]
* [http://hullbreachonline.com/ds HullBreach Online Lite]