Nintendo DSi Browser: Difference between revisions

Example Sites: Keep your f***ing spam off this page! The last thing we need is non-contributors posting their useless link sites. Make a real contribution or GTFO, please.
m Socialcu.be does not have https
 
(19 intermediate revisions by 8 users not shown)
Line 85: Line 85:
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]
You can test this mode with the following demo page: [http://dsipaint.com DSiPaint].
 
THE ABOVE LINK IS DEAD. DON'T BOTHER.


=== Detect User Agent ===
=== Detect User Agent ===
To detect if the user agent is Nintendo DSi Browser :
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) //If the UserAgent is not "Nintendo DSi"
          {
                location.replace('http://www.dsibrew.org'); //Redirect to an other page
          }
      }
</script>


=== Key Codes ===
=== Key Codes ===
Line 139: Line 128:
# Add the following JavaScript just before the </body> tag:
# Add the following JavaScript just before the </body> tag:


  <script>document.body.scrollTop = 176;</script>
  <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:
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:
Line 145: Line 134:
  <html>
  <html>
   <head>
   <head>
     <meta name="viewport" content="width=240">
     <meta name="viewport" content="width=240" />
     <style>
     <style type="text/css">
       body { margin: 0px; }
       body { margin: 0px; }
       #topscreen, #bottomscreen { width: 240px; height: 176px; overflow: hidden; }
       #topscreen, #bottomscreen { width: 240px; height: 176px; overflow: hidden; }
Line 152: Line 141:
   </head>
   </head>
   <body>
   <body>
     &lt;div id="topscreen"> < meta name="keywords" content="whats in your site" >
     &lt;div id="topscreen">Top Screen&lt;/div>
< link href="css/main.css" rel="stylesheet" type="text/css" / >
     &lt;div id="bottomscreen">Bottom Screen&lt;/div>
< meta name="viewport" content="width=240" >Top Screen&lt;/div>
     &lt;div id="bottomscreen"> < meta name="keywords" content="whats in your site" >
< link href="css/main.css" rel="stylesheet" type="text/css" / >
< meta name="viewport" content="width=240" >Bottom Screen&lt;/div>
   </body>
   </body>
  </html>
  </html>
Line 165: Line 150:
== 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://dsipaint.com DSiPaint]
* [http://hullbreachonline.com/ds HullBreach Online Lite]
* [http://hullbreachonline.com/ds HullBreach Online Lite]
* [http://dsinvent.ath.cx DSinvent]


== See also ==
== See also ==