Difference between revisions of "网络浏览器"

From 3dbrew
Jump to navigation Jump to search
Line 77: Line 77:
 
In order to set both at the same time (without either resetting to 0), use <em>window.scrollTo</em>.
 
In order to set both at the same time (without either resetting to 0), use <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> 和触摸、手势事件不被支持。
  
 
== 屏幕分辨率 ==
 
== 屏幕分辨率 ==

Revision as of 15:26, 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.

事件

按键事件

以下按钮会触发onkeydown事件,onkeypress事件 和 onkeyup事件:

按键
13 A
37
38 Up
39
40

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

触摸/鼠标事件

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

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

屏幕分辨率

屏幕分辨率为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