Difference between revisions of "Nintendo DSi Browser"
(Fixed grammer error) |
|||
| Line 1: | Line 1: | ||
| − | Browse the web with the second edition of the Opera browser for DSi. The browser | + | Browse the web with the second edition of the Opera browser for DSi. The browser uses Opera 9.50. This application is available on the [[Nintendo DSi Shop]]. It's free. |
== Features/Limitations == | == Features/Limitations == | ||
| Line 59: | Line 59: | ||
Sample DSi Browser User Agent Strings : | Sample DSi Browser User Agent Strings : | ||
| − | |||
*Opera/9.50 (Nintendo DSi; Opera/483; U; en-US) | *Opera/9.50 (Nintendo DSi; Opera/483; U; en-US) | ||
*Opera/9.50 (Nintendo DSi; Opera/483; U; en-GB) | *Opera/9.50 (Nintendo DSi; Opera/483; U; en-GB) | ||
Revision as of 03:07, 17 May 2009
Browse the web with the second edition of the Opera browser for DSi. The browser uses Opera 9.50. This application is available on the Nintendo DSi Shop. It's free.
Features/Limitations
| Feature | Supported |
|---|---|
| Audio | No |
| Canvas | Limited |
| CSS2 | Yes |
| CSS3 | Partial (test here) |
| DOM | Yes |
| DOM2 | Yes |
| Javascript | Yes |
| File Download | No |
| File Upload | No |
| Flash | No |
| HTML5 | Partial |
| Plugins | No |
| SVG | No |
| Video | No |
| XHTML | Yes |
| XMLHttpRequest | Yes |
User Agent strings
Sample DSi Browser User Agent Strings :
- Opera/9.50 (Nintendo DSi; Opera/483; U; en-US)
- Opera/9.50 (Nintendo DSi; Opera/483; U; en-GB)
Tips
Vertical mode
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=240">
Using device-width will adapt the page to the width of other mobile devices.
You can test this mode with the following demo page: here
Detect User Agent
To detect if the user agent is Nintendo DSi Browser :
<script type="text/javascript">
window.onload=function()
{
if (navigator.userAgent.indexOf('Nintendo DSi') == -1) //If the UserAgent is not "Nintendo DSi"
{
location.replace('http://www.dsibrew.org'); //Redirect to an other page
}
}
</script>
Key Codes
| Code | Button |
|---|---|
| 13 | A |
| 37 | Left |
| 38 | Up |
| 39 | Right |
| 40 | Down |
Notes :
- Only A, Up, and Down normally emit codes
- Left and Right can be read only if L or R are held
- 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 240x176. 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.