网络浏览器: Difference between revisions

T (talk | contribs)
Syphurith (talk | contribs)
m Add detail
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
3DS网络浏览器是在2011年6月更新的功能(JPN/EUR/USA)
3DS网络浏览器是在2011年6月更新的功能(JPN/EUR/USA)


从网络浏览器的说明/帮助字段可知:
从3DS网络浏览器的说明/帮助字段可知:
完全遵循 LGPL,OSS源代码可以从任天堂网站获得.
完全遵循 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/]


3DS网络浏览器 [http://en.wikipedia.org/wiki/Netfront Netfront] Browser NX v1.0 基于 [http://en.wikipedia.org/wiki/WebKit WebKit] 引擎。
3DS网络浏览器 [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; ; 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''
* '''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。
*[http://acid3.acidtests.org/ Acid3] 测试得分90/100。
*网络图像可以存储到 [[SD Filesystem|SD Card]],然后用 [[Nintendo 3DS Camera]] 查看。
*网络图像可以存储到 [[SD Filesystem|SD Card]],然后用 [[Nintendo 3DS Camera]] 查看。
*存储到 [[SD Filesystem|SD Card]] 或者3DS本机内存的图像可以上传到博客或者其他使用以下HTML代码传图的网站。
*存储在 [[SD Filesystem|SD Card]] 或者3DS本机内存的图像可以上传到博客,或者其他使用以下HTML代码传图的网站。
  <input type="file" />
  <input type="file" />
* HTML5Test.com说它支持拖拽缩放,但是实际上没做到。webkit已经有这样的代码,但是没有浏览器的接口。
* HTML5Test.com说它支持拖拽缩放,但是实际上不支持。webkit有这样的代码,但是没有提供浏览器接口。


==Tips==
==Tips==


=== User Agent ===
=== User Agent检测 ===


To detect if the user agent is Nintendo 3DS Browser :
检测User Agent是不是任天堂3DS浏览器 :


  <script type="text/javascript">
  <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>
  </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
* 访问这两个属性时均返回0
* 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%"
{|class="wikitable" width="20%"
! Code !! Button
! !! 按键
|-
|-
| 13 || A
| 13 || A
|-
|-
| 37 || Left
| 37 ||
|-
|-
| 38 || Up
| 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>。
3D屏幕分辨率为400×240,在浏览器中的可视面积<b>400×220</b>;触摸屏分辨率320×240,在浏览器中触摸屏可视分辨率<b>320×212</b>。


你可以在两个屏幕中查看一个页面。操作时,下屏是可以操作的,而上屏随之滚动。这样在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==
== 示例网站 ==
<!-- If you have a website that demonstrates these techniques, place it here! -->
<!-- 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://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] - 这是浏览器预置书签中的第一个