Difference between revisions of "网络浏览器"

From 3dbrew
Jump to navigation Jump to search
Line 108: Line 108:
 
你可以在两个屏幕中查看一个页面。操作时，下屏是可以操作的，而上屏随之滚动。这样在CSS计算样式时，在220px而不是432px的范围内，元素从下往上定位。
 
你可以在两个屏幕中查看一个页面。操作时，下屏是可以操作的，而上屏随之滚动。这样在CSS计算样式时，在220px而不是432px的范围内，元素从下往上定位。
  
−
== 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:
+
通常最简单的正确布局是创建包含双屏的HTML元素，比如这样：
  
 
  <!DOCTYPE html>
 
  <!DOCTYPE html>
Line 123: Line 123:
 
   </head>
 
   </head>
 
   <body>
 
   <body>
−
     &lt;div id="topscreen">Top Screen&lt;/div>
+
     &lt;div id="topscreen">上屏&lt;/div>
−
     &lt;div id="bottomscreen">Bottom Screen&lt;/div>
+
     &lt;div id="bottomscreen">下屏&lt;/div>
 
   </body>
 
   </body>
 
  </html>
 
  </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:
+
使用这种方法很容易通过JavaScript操作页面。为了让窗口获得正确的位置，可以使用下面的JavaScript代码：
  
 
  window.setInterval(function () {
 
  window.setInterval(function () {
Line 134: Line 134:
 
  }, 50);
 
  }, 50);
  
−
This automatically resets the position if the user accidentally scrolls the page.
+
这样如果用户不小心滚动了页面，页面能够自动复位。
  
 
==Example Sites==
 
==Example Sites==

Revision as of 15:15, 28 March 2013

3DS网络浏览器是在2011年6月更新的功能(JPN/EUR/USA)

从网络浏览器的说明/帮助字段可知： 完全遵循 LGPL，OSS源代码可以从任天堂网站获得. 下载地址：[1]

3DS网络浏览器 Netfront Browser NX v1.0 基于 WebKit 引擎。

3DS网络浏览器可以存储 64 个书签。

User-agent 示例：

  • 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
  • 版本标号仅为示例...


Web标准

  • HTML 4.01
  • HTML 5 ( HTML5Test.com得分120/400)
  • XHTML 1.1
  • CSS 1
  • CSS 2.1
  • CSS 3 (一些功能不支持)
  • DOM Levels 1-3
  • ECMAScript (支持ECMA-262 第5版的一部分)
  • XMLHttpRequest Level 2
  • Canvas Element (一些功能不支持)

网络协议

  • HTTP 1.0
  • HTTP 1.1
  • SSLv3
  • TLS 1.0

图像格式

  • MPO
  • GIF
  • JPEG
  • PNG
  • BMP
  • ICO (不完全支持)

插件

不支持插件 (比如 Flash)

其他细节

  • Acid3 测试得分90/100。
  • 网络图像可以存储到 SD Card，然后用 Nintendo 3DS Camera 查看。
  • 存储到 SD Card 或者3DS本机内存的图像可以上传到博客或者其他使用以下HTML代码传图的网站。
<input type="file" />
  • HTML5Test.com说它支持拖拽缩放，但是实际上没做到。webkit已经有这样的代码，但是没有浏览器的接口。

Tips

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 lift the stylus or you've held it on the screen for ~2 seconds—which is when text selection mode is activated—making it pretty much the same as onmouseup. The events cannot have their default action cancelled.

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

屏幕分辨率

屏幕分辨率为400×240，浏览器中的可视面积400×220，触摸屏分辨率320×240，浏览器中触摸屏可视分辨率320×212。

你可以在两个屏幕中查看一个页面。操作时，下屏是可以操作的，而上屏随之滚动。这样在CSS计算样式时，在220px而不是432px的范围内，元素从下往上定位。

使用双屏

通常最简单的正确布局是创建包含双屏的HTML元素，比如这样： 

<!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">上屏</div>
    <div id="bottomscreen">下屏</div>
  </body>
</html>

使用这种方法很容易通过JavaScript操作页面。为了让窗口获得正确的位置，可以使用下面的JavaScript代码： 

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

这样如果用户不小心滚动了页面，页面能够自动复位。

Example Sites

Retrieved from "https://www.3dbrew.org/w/index.php?title=网络浏览器&oldid=5219"