网络浏览器

From 3dbrew
Jump to navigation Jump to search

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]

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