Difference between revisions of "Internet Browser"

From 3dbrew
Jump to navigation Jump to search
(General improvements, updated the dual screen view code and added a little of my own research)
m (→‎Using Both Screens: DOCTYPE should be used to prevent quirks mode)
Line 115: Line 115:
 
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:
  
 +
<!DOCTYPE html>
 
  <html>
 
  <html>
 
   <head>
 
   <head>

Revision as of 13:41, 21 March 2012

The 3DS Internet Browser was added in the June 2011 Update for JPN/EUR/USA.

From the Internet Browser help section: In compliance with the LGPL, the source code of the OSS is available via the Nintendo website. This source code can be downloaded here: [1]

The 3D Internet Browser is Netfront Browser NX v1.0 based on WebKit engine.

The browser supports up to 64 bookmarks.

User-agent is (for example)

  • Mozilla/5.0 (Nintendo 3DS; U; ; fr) Version/1.7412.EU for a EUR/fr Nintendo 3DS
  • Mozilla/5.0 (Nintendo 3DS; U; ; en) Version/1.7455.US for a USA/en Nintendo 3DS
  • The versions are just for example...


Web Standards

  • HTML 4.01
  • HTML 5 (120/400 score on HTML5Test.com)
  • XHTML 1.1
  • CSS 1
  • CSS 2.1
  • CSS 3 (some functionality is unavailable)
  • DOM Levels 1-3
  • ECMAScript (partial support for ECMA-262 5th Edition)
  • XMLHttpRequest Level 2
  • Canvas Element (some functionality is unavailable)

Protocols

  • HTTP 1.0
  • HTTP 1.1
  • SSLv3
  • TLS 1.0

Image Formats

  • MPO
  • GIF
  • JPEG
  • PNG
  • BMP
  • ICO (some files cannot be displayed)

Plug-Ins

Plug-ins (such as Adobe Flash) are not supported.

Other details

  • It scored 90/100 on Acid3 test
  • Images from the Internet can be saved to the SD Card and viewed using the Nintendo 3DS Camera application.
  • Images saved to an SD Card or to the Nintendo 3DS system memory can be uploaded to blogs or other sites that allow the uploading of photos using :
<input type="file" />
  • HTML5Test.com say that Drag and drop is supported but it's not (code on WebKit is ready, but it's not implemented on interface of browser)

Tips

Detect User Agent

To detect if the user agent is Nintendo 3DS Browser : 

<script type="text/javascript">
    if (navigator.userAgent.indexOf('Nintendo 3DS') == -1) { //If the UserAgent is not "Nintendo 3DS"
        location.replace('http://www.3dbrew.org'); //Redirect to an other page
    }
</script>
  • You can check navigator.platform=="Nintendo 3DS" as well.

Scrolling

Scrolling can be altered by modifying document.body.scrollTop and document.body.scrollLeft. However, there are drawbacks related to working with these properties:

  • Both properties return 0 when accessed
  • Setting one property resets the other property's scroll position

In order to set both at the same time (without either resetting to 0), use window.scrollTo.

Events

Key Events

The following buttons trigger the onkeydown, onkeypress and onkeyup events:

Code Button
13 A
37 Left
38 Up
39 Right
40 Down

The events cannot have their default action cancelled. Other buttons do not trigger key events.

Touch/Mouse Events

onmousedown, onmouseup & onclick are all triggered by the browser. However, the onmousedown event doesn't trigger until you've held the stylus on the screen for ~2 seconds, which is when text selection mode is activated. The events cannot have their default action cancelled.

The onmousemove and common touch/gesture events are not supported.

Screen Resolution

The up screen resolution is 400×240. However, the viewable area in the browser is only 400×220.

The touch screen resolution is 320×240. However, the viewable area in the browser is only 320×212.

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 220px and not the full 432px of both screens.

Using Both Screens

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: 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=400">
    <style>
      body { margin: 0px; }
      #topscreen { width: 400px; height: 220px; overflow: hidden; }
      #bottomscreen { width: 320px; height: 212px; overflow: hidden; margin: 0 auto; }
    </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. In order to have the window snap to the correct position, use the following JavaScript code: 

window.setInterval(function () {
    window.scrollTo(40, 220);  
}, 50);

This automatically resets the position if the user accidentally scrolls the page.

Example Sites

Retrieved from "https://www.3dbrew.org/w/index.php?title=Internet_Browser&oldid=2705"