网络浏览器: Difference between revisions

← Older edit

Latest revision as of 02: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标准

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检测

检测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"

滚动

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

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

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

事件

按键事件

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

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

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

触摸/鼠标事件

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

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

屏幕分辨率

3D屏幕分辨率为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);

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

示例网站

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 50: / Line 50: @@
 *[http://acid3.acidtests.org/ Acid3] 测试得分90/100。
 *网络图像可以存储到 [[SD Filesystem|SD Card]]，然后用 [[Nintendo 3DS Camera]] 查看。
-*存储到 [[SD Filesystem|SD Card]] 或者3DS本机内存的图像可以上传到博客或者其他使用以下HTML代码传图的网站。
+*存储在 [[SD Filesystem|SD Card]] 或者3DS本机内存的图像可以上传到博客，或者其他使用以下HTML代码传图的网站。
   <input type="file" />
-* HTML5Test.com说它支持拖拽缩放，但是实际上没做到。webkit已经有这样的代码，但是没有浏览器的接口。
+* HTML5Test.com说它支持拖拽缩放，但是实际上不支持。webkit有这样的代码，但是没有提供浏览器接口。
 ==Tips==
-=== 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>事件、触摸事件和手势事件。
 == 屏幕分辨率 ==
-屏幕分辨率为400×240，浏览器中的可视面积<b>400×220</b>，触摸屏分辨率320×240，浏览器中触摸屏可视分辨率<b>320×212</b>。
+D屏幕分辨率为400×240，在浏览器中的可视面积<b>400×220</b>；触摸屏分辨率320×240，在浏览器中触摸屏可视分辨率<b>320×212</b>。
-你可以在两个屏幕中查看一个页面。操作时，下屏是可以操作的，而上屏随之滚动。这样在CSS计算样式时，在220px而不是432px的范围内，元素从下往上定位。
+你可以在两个屏幕中查看一个页面。下屏是可以操作的，而上屏随之滚动。这样在CSS计算样式时，元素从下往上定位，并且范围有220px而不是432px，这样的特性非常重要。
 == 使用双屏 ==
@@ Line 136: / Line 136: @@
 这样如果用户不小心滚动了页面，页面能够自动复位。
-==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] - 这是浏览器预置书签中的第一个

网络浏览器: Difference between revisions

Latest revision as of 02:51, 29 March 2013

Contents

Web标准

网络协议

图像格式

插件

其他细节

Tips

User Agent检测

滚动

事件

按键事件

触摸/鼠标事件

屏幕分辨率

使用双屏

示例网站

Navigation menu

网络浏览器: Difference between revisions

Latest revision as of 02:51, 29 March 2013

Web标准

网络协议

图像格式

插件

其他细节

Tips

User Agent检测

滚动

事件

按键事件

触摸/鼠标事件

屏幕分辨率

使用双屏

示例网站

Navigation menu

Search