Браузер
Nintendo DSi

Редкие звери: когда-то давно я развлекался исследованием экзотических браузеров на всяких не сильно распространенных устройствах. Это — одно из таких исследований.

Разрешение экрана 256 × 192, 2 штуки
Размер вьюпорта 240 × 176
Браузер Opera (Presto)
User Agent Opera/9.50 (Nintendo DSi; Opera/507; U; en-US)
Acid3 59/100
HTML5 Test 82/555
CSS3 Test Не запустился

Nintendo DSi — портативная игровая приставка с двумя экранами. Нижний — тачскрин с резистивным тачем, верхний — обычный экран. Интерфейс и качество тачскрина предполагают управление стилусом.

Железка крайне слабая. Частота процессора 133 МГц, оперативная память — 16 Мб. Связь с интернетом по Wi-Fi. Браузер — Опера (не мини, то есть не пропускает трафик через свой сервер).

Сайты могут отображаться в двух режимах. Первый — для сайтов, не адаптированных под мобильные устройства. Один экран в этом случае используется для отображения уменьшенной картинки сайта, другой показывает увеличенный выделенный участок:

Функции экранов можно менять местами, при этом на нижнем экране можно перетаскивать выделенную область:

Второй режим для адаптированных под маленькие экраны сайтов. В этом случае верхний экран служит продолжением нижнего. Сайт появляется на нижнем экране, верхний изначально пустой. При скролле страницы верхний экран заполняется:

Мобильный режим активируется при наличии мета-тега с подходящим вьюпортом, например <meta name="viewport" content="width=device-width">.

Особенности

Поддержка фич

Фичи тестировались Модернайзером. Полная таблица моих тестов на гугл доксах.

Фича Тест Реальный результат
backgroundsize False False
bgsizecover False False
borderradius False False
boxshadow False False
boxsizing False True
cssanimations False False
cssgradients False False
csstransforms False False
csstransforms3d False False
csstransitions False False
fontface False False
mediaqueries True True
opacity True True
rgba False False
textshadow True True (без блюра)
touch False False
video False False

Из моего набора тестов браузер поддерживает только Media queries, opacity, box-sizing и text-shadow без размывки. Причем тест Модернайзера на поддержку box-sizing дает ложноотрицательный результат. Браузер понимает и корректно обрабатывает CSS-свойство, но никак не реагирует на обращение к style.boxSizing через яваскрипт (в том числе с префиксом Оперы).

Шрифты

Браузер использует один шрифт для всего вообще. Шрифт без засечек. Где-то в приватной области юникода лежит набор пиктограмм, которые, видимо, используются в интерфейсе консоли.

Кроме того, браузер использует всего три размера шрифта и преобразует любой размер в один из своих: маленький для ComputedStyle от 0px до 11px, средний для 12px — 14px и большой для 15px и больше.

При этом все остальные метрики остаются неизменными. Поэтому, например, если у параграфа стоит свойство margin: 0 0 1.5em 0, отступ получится относительно заданного размера шрифта, а не относительно получившегося в результате.

Главный и самый противный баг шрифта: кириллические символы отображаются с огромным межбуквенным расстоянием:

Сравните межбуквенное расстояние у латиницы и кириллицы

Скролл

Сайт можно скроллить джойстиком, драгскроллом (перетаскиванием), либо с помощью постоянно видимого скроллбара.

Блоки с overflow: scroll / auto при переполнении также имеют постоянно видимый скролл. Драгскролл для них не работает.

Формы

Браузер, на удивление, поддерживает довольно много новых типов полей ввода: url, email, datetime, date, month, week, time, datetime-local, number, range:

Все поля валидируются на соответствие типу при отправке формы. Также работает валидация по аттрибуту pattern. Датапикер глючит:

Пытаясь уместиться в свободное пространство, датапикер превращается в неюзабельное месиво

jQuery

jQuery не работает начиная с версии 1.9.1 и выше. Причину выяснить я не смог.

Итого

Вполне можно адаптировать несложный мобильный сайт под эту железку без особых усилий, если использовать грамотные фоллбеки и исправить проблему с шрифтом. Тот же сайт твиттера, например, работает вполне сносно.

Опубликовано