Nintendo DSi browser
|Screen resolution||256 × 192, 2 screens|
|Viewport size||240 × 176|
|CSS3 Test||Failed to run|
Nintendo DSi is a portable gaming console with two screens. Bottom screen is a resistive touchscreen, the top one isn’t. Console’s UI and touchscreen qualities assume that you use it with a stylus.
It’s pretty underpowered, with a 133 MHz processor and just 16 Mb of RAM. Internet connection is done via WiFi. Console’s browser is based on Opera (not Opera Mini, i. e. it doesn’t proxy its traffic through Opera’s serverside thingy).
There are two ways the browser can display a page. The first is for regular, not mobile-optimized sites. One of the screens is used to display a whole zoomed-out page, the other shows a zoomed-in highlighted area:
You can swap the screen functions and drag the selection rectangle on the bottom screen:
The second mode is for mobile-optimized websites. It uses the top screen as an extension of the bottom one. The page starts on the bottom screen, the top screen starts blank and fills up as you scroll:
Mobile-optimized mode is activated with an appropriate viewport meta-tag, e. g.
<meta name="viewport" content="width=device-width">.
Feature tests are done using Modernizr. Full table of my tests on google docs.
|textshadow||True||True (no blur)|
As expected, the browser’s support for fancy new features isn’t huge: it supports
text-shadow without blur. Modernizr’s
box-sizing test returns a false negative result. Turns out, the browser understands the CSS-property, but doesn’t react in any way to the
The browser uses a single font for everything. It’s a sans-serif font, it has a couple of icons in its private use unicode area, which seem to be used somewhere in the console’s UI.
Moreover, the browser only uses three font sizes and transforms any other font size to one of those: small for
ComputedStyle size, medium for
14px and big for
15px and above.
Despite this font-size transformation, other metrics remain the same, e. g. a paragraph with
margin: 0 0 1.5em 0 will have a margin calculated relatively to the specified
font-size value, not the resulting one.
The font’s most annoying bug, though, is its weird letter-spacing for cyrillic characters:
Pages can be scrolled with the D-pad, using dragscroll or with a constantly visible scrollbar. Overflowed blocks also have a constantly visible scrollbar. Dragscroll doesn’t work for them.
Surprisingly enough, the browser’s support for new input types is reasonable. It supports
All the fields are validated according to their types when the form is submitted,
pattern validation also works. Datepicker is buggy:
jQuery doesn’t work starting from version 1.9.1 and above. No idea why.
It’s totally possible to adapt a simple mobile website for this thingy pretty effortlessly. You just have to use proper fallbacks and consider the font problems. Twitter’s mobile site, for instance, is looking pretty good.