Difference between revisions of "Nintendo DSi Browser"

From DSiBrew
Jump to navigation Jump to search
m (Socialcu.be does not have https)
 
(67 intermediate revisions by 24 users not shown)
Line 1: Line 1:
−
{{stub}}
+
The '''Nintendo DSi Browser''' is a free application downloadable from the [[Nintendo DSi Shop]]. It is capable of browsing the internet, but only with some plugins, including Javascript. Adobe Flash is not compatible with the application. Though Flash is not supported, sites such as DSiCade and DSiPaint have took advantage of the Javascript functionality and created games and applications, similar to ones created for Adobe Flash.
−
Browse the web with the second edition of the Opera browser for DS. (Flash and things not supported)
 
  
−
Sample DSi Browser User Agent Strings:
+
== Changelog ==
  
 +
=== 29/30 July 2009 version (507) ===
 +
 +
* Reducing the size by 3 blocks
 +
 +
=== First version (483) ===
 +
 +
* First release
 +
 +
== Features/Limitations ==
 +
 +
{|class="wikitable sortable" width="300px"
 +
! Feature
 +
! Supported
 +
|-
 +
| Audio
 +
| bgcolor="#ffdddd" | No
 +
|-
 +
| Canvas
 +
| bgcolor="#ffffdd" | Limited
 +
|-
 +
| CSS2
 +
| bgcolor="#ddffdd" | Yes
 +
|-
 +
| CSS3
 +
| bgcolor="#ffffdd" | Partial ([http://www.css3.info/selectors-test/ test here])
 +
|-
 +
| DOM
 +
| bgcolor="#ddffdd" |Yes
 +
|-
 +
| DOM2
 +
| bgcolor="#ddffdd" |Yes
 +
|-
 +
| Javascript
 +
| bgcolor="#ddffdd" | Yes
 +
|-
 +
| File Download
 +
| bgcolor="#ffdddd" | No
 +
|-
 +
| File Upload
 +
| bgcolor="#ffdddd" | No
 +
|-
 +
| Flash
 +
| bgcolor="#ffdddd" | No
 +
|-
 +
| HTML5
 +
| bgcolor="#ffffdd" | Partial
 +
|-
 +
| Plugins
 +
| bgcolor="#ffdddd" | No
 +
|-
 +
| SVG
 +
| bgcolor="#ffdddd" | No
 +
|-
 +
| Video
 +
| bgcolor="#ffdddd" | No
 +
|-
 +
| XHTML
 +
| bgcolor="#ddffdd" | Yes
 +
|-
 +
| XMLHttpRequest
 +
| bgcolor="#ddffdd" | 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-US)
 
*Opera/9.50 (Nintendo DSi; Opera/483; U; en-GB)
 
*Opera/9.50 (Nintendo DSi; Opera/483; U; en-GB)
 +
*Opera/9.50 (Nintendo DSi; Opera/507; U; en-US)
 +
*Opera/9.50 (Nintendo DSi; Opera/507; U; en-GB)
  
 
== Tips ==
 
== Tips ==
  
−
* To active the vertical mode automatically, add this tag between <head></head> :
+
=== 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">
 
  <meta name="viewport" content="width=240">
  
−
* To detect if the user agent is Nintendo DSi Browser :
+
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://dsipaint.com DSiPaint].
 +
 +
=== Detect User Agent ===
 +
To detect if the user agent is Nintendo DSi Browser :
 
  <script type="text/javascript">
 
  <script type="text/javascript">
−
       window.onload=function()
+
       window.onload=function
−
      {
+
 
−
          if (navigator.userAgent.indexOf("Nintendo DSi") == -1)
+
=== Key Codes ===
−
          {
+
 
−
                location.replace("http://www.dsibrew.org");
+
{|class="wikitable" width="20%"
−
          }
+
! Code !! Button
−
      }
+
|-
−
  </script>
+
| 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 <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 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>
 +
    &lt;div id="topscreen">Top Screen&lt;/div>
 +
    &lt;div id="bottomscreen">Bottom Screen&lt;/div>
 +
  </body>
 +
  </html>
 +
 
 +
This scheme allows the page to be easily manipulated through JavaScript.
 +
 
 +
== Example Sites ==
 +
<!-- 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://hullbreachonline.com/ds HullBreach Online Lite]
 +
 
 +
== See also ==
 +
 
 +
* [[Nintendo DSi Shop]]
 +
* [[Nintendo Software]]

Latest revision as of 02:50, 4 April 2017

The Nintendo DSi Browser is a free application downloadable from the Nintendo DSi Shop. It is capable of browsing the internet, but only with some plugins, including Javascript. Adobe Flash is not compatible with the application. Though Flash is not supported, sites such as DSiCade and DSiPaint have took advantage of the Javascript functionality and created games and applications, similar to ones created for Adobe Flash.

Changelog

29/30 July 2009 version (507)

  • Reducing the size by 3 blocks

First version (483)

  • First release

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)
  • Opera/9.50 (Nintendo DSi; Opera/507; U; en-US)
  • Opera/9.50 (Nintendo DSi; Opera/507; 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: DSiPaint.

Detect User Agent

To detect if the user agent is Nintendo DSi Browser : 

<script type="text/javascript">
     window.onload=function

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:

  1. Use the meta tag to set vertical mode
  2. Ensure that your page takes up exactly 240x352 pixels.
  3. 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

See also

Retrieved from "https://dsibrew.org/w/index.php?title=Nintendo_DSi_Browser&oldid=2098838"