Nintendo DSi Browser: Difference between revisions

m Socialcu.be does not have https
 
(17 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:


<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 161: 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]