Утром доделаю

Браузер Nintendo DSi

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 и выше. Причину выяснить я не смог.

Итого

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

Опубликовано в «Редких зверях»