Build a website optimized for the Nintendo 3DS

[bcnjr5]

I am trying to build a website optimized for the Nintendo 3DS. If anyone knows any html that would be good for that please post here.

 

[ellescuba27]

If you don't mind using Javascript, the platform is "Nintendo 3ds".

if (navigator.platform == "Nintendo 3ds") {
alert("You are using a Nintendo 3ds!");
// what to do if the user is using a Nintendo 3ds, write certain things to the page, do certain functions etc.
}

You can also detect if the user is pressing the D-Pad or A button using keycodes. The D-pad keycodes are the same as a computer keyboard, and the A button is 13. The other buttons don't have keycodes. So:

function keydetect(e) {
if (e) {
var whichone = (e.which);
}
if (!e) {
e = event
var whichone = (e.keyCode);
}
if (whichonetwo == 13) {
alert("You pressed the A button!");
}
if (whichonetwo == 37) {
alert("You pressed left on the D-pad!");
}
if (whichonetwo == 38) {
alert("You pressed up on the D-pad!!");
}
if (whichonetwo == 39) {
alert("You pressed right on the D-pad!");
}
if (whichonetwo == 40) {
alert("You pressed down on the D-pad!");
}
}
document.onkeyup = keydetect;

It works because document.onkeyup always returns an e variable, except in IE where it returns event, which contains information about the keystroke. This could be called which or keyCode depending on your browser.

The screen size in pixels of a 3ds internet browser is 1274x1470 (width then height). However, if you zoom in it goes to 832x960, 554x640, 416x480, 277x320, and at the highest zoom level, 208x240. You could try using percents, like:

<img src="image.jpg" width="100%" height="100%" border="0">

Or you could try Javascript code again:

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

You can even get the users location by using Maxmind GeoIP, once again, using Javascript:
http://www.maxmind.com/app/javascript_city
You can also use other languages:
http://www.maxmind.com/app/api
Just make sure you follow their instructions and add a link to their site.

Linking to an MPO file on a 3ds will lead to a 3d display. You can do this with Stereophoto Maker:
http://stereo.jpn.org/eng/stphmkr/index.html
and link to it like normal:

<a href="image.mpo">Click here for a 3d display!</a>

You can have a user upload images and sounds on the SDCARD by using an upload button:

<input type="file" />

According to 3dbrew (see sources) you can have a webpage span both screens by:
[Ensuring] that your page takes up exactly 320x432 pixels.
[Adding] the following JavaScript just before the </body> tag:

<script>document.body.scrollTop = 220;</script>

Should add one last thing. The Nintendo 3ds doesn't have any plugins built in, so don't use Flash etc.

So yeah, that's about it. I love the Nintendo 3ds too! Make sure you add Javascript tags around the Javascripts too!

Sources: http://3dbrew.org/wiki/Internet_Browser and me