Difference between revisions of "网络浏览器"

Latest revision as of 03:51, 29 March 2013

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

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

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标准[edit]

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 (一些功能不支持)

网络协议[edit]

HTTP 1.0
HTTP 1.1
SSLv3
TLS 1.0

图像格式[edit]

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

插件[edit]

不支持插件 (比如 Flash)

其他细节[edit]

Acid3 测试得分90/100。
网络图像可以存储到 SD Card，然后用 Nintendo 3DS Camera 查看。
存储在 SD Card 或者3DS本机内存的图像可以上传到博客，或者其他使用以下HTML代码传图的网站。

<input type="file" />

HTML5Test.com说它支持拖拽缩放，但是实际上不支持。webkit有这样的代码，但是没有提供浏览器接口。

Tips[edit]

User Agent检测[edit]

检测User Agent是不是任天堂3DS浏览器 :

<script type="text/javascript">
    if (navigator.userAgent.indexOf('Nintendo 3DS') == -1) { //如果 UserAgent 不是 "Nintendo 3DS"
        location.replace('http://www.3dbrew.org'); //重定向到其他页面
    }
</script>

你也可以检查 navigator.platform=="Nintendo 3DS"

滚动[edit]

可以通过设置 document.body.scrollTop 和 document.body.scrollLeft　属性值改变页面滚动的位置。然而使用这些属性也有不足之处：

访问这两个属性时均返回０
设置一个滚动条时改变了另一个滚动条的位置

为了同时设置两个滚动条的位置，（而不是把其中一个置零），可以使用window.scrollTo.

事件[edit]

按键事件[edit]

以下按钮可以触发onkeydown事件，onkeypress事件和 onkeyup事件:

值	按键
13	A
37	左
38	Up
39	右
40	下

这些事件不能取消他们的默认动作。列表外的按钮不会触发按键事件。

触摸/鼠标事件[edit]

onmousedown, onmouseup 和 onclick 都是由浏览器触发的事件。但是onmousedown事件只在抬起手写笔时，或者长按两秒以上才会发生。当文本选择模式被激活时，这和onmouseup事件的效果相同。这些事件同样不能取消默认动作。

不支持onmousemove事件、触摸事件和手势事件。

屏幕分辨率[edit]

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

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

使用双屏[edit]

通常最简单的正确布局是创建包含双屏的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);

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

示例网站[edit]

Weapons and Colors (短网址 : http://bit.ly/3DSwc)
jFox (短网址 : http://bit.ly/iB7FqW)
Ditto3D
Nintendo 3DS Bookmarks - 这是浏览器预置书签中的第一个

@@ Line 1: / Line 1: @@
 DS网络浏览器是在2011年6月更新的功能(JPN/EUR/USA)
-从网络浏览器的说明/帮助字段可知：
+从3DS网络浏览器的说明/帮助字段可知：
 完全遵循 LGPL，OSS源代码可以从任天堂网站获得.
-下载地址：[http://mediacontent.nintendo-europe.com/NOE/images/service/OpenSources.zip]
+下载地址：[http://mediacontent.nintendo-europe.com/NOE/images/service/OpenSources.zip]或[http://www.nintendo.com/3ds/internetbrowser/sourcecode/]
 DS网络浏览器 [http://en.wikipedia.org/wiki/Netfront Netfront] Browser NX v1.0 基于 [http://en.wikipedia.org/wiki/WebKit WebKit] 引擎。
@@ Line 12: / Line 12: @@
 * '''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''
-* 版本标号仅为示例...
+* 版本标号仅为示意...
@@ Line 18: / Line 18: @@
 ==Web标准==
 *HTML 4.01
-*HTML 5 (120/400 score on [http://www.html5test.com HTML5Test.com])
+*HTML 5 ( [http://www.html5test.com HTML5Test.com]得分120/400)
 *XHTML 1.1
 *CSS 1
 *CSS 2.1
-*CSS 3 (some functionality is unavailable)
+*CSS 3 (一些功能不支持)
 *DOM Levels 1-3
-*ECMAScript (partial support for ECMA-262 5th Edition)
+*ECMAScript (支持ECMA-262 第5版的一部分)
 *XMLHttpRequest Level 2
-*Canvas Element (some functionality is unavailable)
+*Canvas Element (一些功能不支持)
 ==网络协议==
@@ Line 48: / Line 48: @@
 ==其他细节==
-*It scored 90/100 on [http://acid3.acidtests.org/ Acid3] test
+*[http://acid3.acidtests.org/ Acid3] 测试得分90/100。
-*Images from the Internet can be saved to the [[SD Filesystem|SD Card]] and viewed using the [[Nintendo 3DS Camera]] application.
+*网络图像可以存储到 [[SD Filesystem|SD Card]]，然后用 [[Nintendo 3DS Camera]] 查看。
-*Images saved to an [[SD Filesystem|SD Card]] or to the Nintendo 3DS system memory can be uploaded to blogs or other sites that allow the uploading of photos using :
+*存储在 [[SD Filesystem|SD Card]] 或者3DS本机内存的图像可以上传到博客，或者其他使用以下HTML代码传图的网站。
   <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)
+* HTML5Test.com说它支持拖拽缩放，但是实际上不支持。webkit有这样的代码，但是没有提供浏览器接口。
 ==Tips==
-=== Detect User Agent ===
+=== User Agent检测 ===
-To detect if the user agent is Nintendo 3DS Browser :
+检测User Agent是不是任天堂3DS浏览器 :
   <script type="text/javascript">
-      if (navigator.userAgent.indexOf('Nintendo 3DS') == -1) { //If the UserAgent is not "Nintendo 3DS"
+      if (navigator.userAgent.indexOf('Nintendo 3DS') == -1) { //如果 UserAgent 不是 "Nintendo 3DS"
-          location.replace('http://www.3dbrew.org'); //Redirect to an other page
+          location.replace('http://www.3dbrew.org'); //重定向到其他页面
       }
   </script>
-* You can check <em>navigator.platform=="Nintendo 3DS"</em> as well.
+* 你也可以检查 <em>navigator.platform=="Nintendo 3DS"</em>
-=== Scrolling ===
+=== 滚动 ===
-Scrolling can be altered by modifying <em>document.body.scrollTop</em> and <em>document.body.scrollLeft</em>.  However, there are drawbacks related to working with these properties:
+可以通过设置 <em>document.body.scrollTop</em> 和 <em>document.body.scrollLeft</em>　属性值改变页面滚动的位置。然而使用这些属性也有不足之处：
-* 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 <em>window.scrollTo</em>.
+为了同时设置两个滚动条的位置，（而不是把其中一个置零），可以使用<em>window.scrollTo</em>.
-=== Events ===
+=== 事件 ===
-==== Key Events ====
+==== 按键事件 ====
-The following buttons trigger the <em>onkeydown</em>, <em>onkeypress</em> and <em>onkeyup</em> events:
+以下按钮可以触发<em>onkeydown</em>事件，<em>onkeypress</em>事件 和 <em>onkeyup</em>事件:
 {|class="wikitable" width="20%"
-! Code !! Button
+! 值 !! 按键
 |-
 | 13 || A
 |-
-| 37 || Left
+| 37 || 左
 |-
 | 38 || Up
 |-
-| 39 || Right
+| 39 || 右
 |-
-| 40 || Down
+| 40 || 下
 |}
-The events cannot have their default action cancelled.  Other buttons do not trigger key events.
+这些事件不能取消他们的默认动作。列表外的按钮不会触发按键事件。
-==== Touch/Mouse Events ====
+==== 触摸/鼠标事件 ====
-<em>onmousedown</em>, <em>onmouseup</em> & <em>onclick</em> are all triggered by the browser.  However, the <em>onmousedown</em> 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 <em>onmouseup</em>.  The events cannot have their default action cancelled.
+<em>onmousedown</em>, <em>onmouseup</em> 和 <em>onclick</em> 都是由浏览器触发的事件。但是<em>onmousedown</em>事件只在抬起手写笔时，或者长按两秒以上才会发生。当文本选择模式被激活时，这和<em>onmouseup</em>事件的效果相同。这些事件同样不能取消默认动作。
-The <em>onmousemove</em> and common touch/gesture events are not supported.
+不支持<em>onmousemove</em>事件、触摸事件和手势事件。
-== Screen Resolution ==
+== 屏幕分辨率 ==
-The up screen resolution is 400×240. However, the viewable area in the browser is only <b>400×220</b>.
+D屏幕分辨率为400×240，在浏览器中的可视面积<b>400×220</b>；触摸屏分辨率320×240，在浏览器中触摸屏可视分辨率<b>320×212</b>。
-The touch screen resolution is 320×240. However, the viewable area in the browser is only <b>320×212</b>.
+你可以在两个屏幕中查看一个页面。下屏是可以操作的，而上屏随之滚动。这样在CSS计算样式时，元素从下往上定位，并且范围有220px而不是432px，这样的特性非常重要。
-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 ==
+通常最简单的正确布局是创建包含双屏的HTML元素，比如这样：
-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>
@@ Line 125: / Line 123: @@
     </head>
     <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>
   </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 () {
@@ Line 136: / Line 134: @@
   }, 50);
-This automatically resets the position if the user accidentally scrolls the page.
+这样如果用户不小心滚动了页面，页面能够自动复位。
-==Example Sites==
+== 示例网站 ==
 <!-- If you have a website that demonstrates these techniques, place it here! -->
-* [http://geekshadow.com/gaming/dev/weaponscolors/3DS/ Weapons and Colors] (Short URL for 3DS : http://bit.ly/3DSwc)
+* [http://geekshadow.com/gaming/dev/weaponscolors/3DS/ Weapons and Colors] (短网址 : http://bit.ly/3DSwc)
-* [http://3ds.andysmith.co.uk/jFox.html jFox] (Short URL for 3DS : http://bit.ly/iB7FqW)
+* [http://3ds.andysmith.co.uk/jFox.html jFox] (短网址 : http://bit.ly/iB7FqW)
 * [http://ditto3d.com/3ds Ditto3D]
-* [http://www.nintendo.com/3ds/internetbrowser/bookmarks Nintendo 3DS Bookmarks] - This is the first bookmark pre-installed in the browser.
+* [http://www.nintendo.com/3ds/internetbrowser/bookmarks Nintendo 3DS Bookmarks] - 这是浏览器预置书签中的第一个