Mobile factorIE9 Mango + HTML5 Going native

Прошлый век4 года назад Сегодня

Source: Zokem study, September 2010Zokem study

1 Source: Global Intelligence Alliance Apr 2010

Полная клавиатура Точный указатель (мышь) Большой экран, несколько мониторов Мощные CPU / GPU, большой HDD Ограниченная/виртуальная клавиатура Пальцы как устройства ввода Маленький поворачивающийся экран Менее мощные CPU / GPU, маленький HDD P HYSICAL E XPERIENCE Фиксированное и предсказуемое место использования Хорошо для погружения в информацию Легкое переключение между задачами Пользователь сконцентрирован Обычно используется на ходу и в непредсказуемом окружении Быстрое схватывание информации Фокус на отдельных задачах Пользователь часто отвлекается или занят

Ничего не делатьБазовая адаптация Контент подходит для разных целей Дизайн под мобильную платформу Нет специальной адаптации, результат это десктопный вариант, отдаваемый устройству. Контент проектируется с учетом того, что он будет просматриваться на мобильных устройствах, специальные meta-теги подсказывают, что страница подготовлена для мобильного устройства. Мобильному и десктопному браузерам отдается одна и тажа страница, но применяются разные стили. Части сайта спроектированы специально для мобильного устройства, часто в отдельном домене или директории, редирект при необходимости.

APIRank% indexOf194% getElementById1380% addEventListener2765% getComputedStyle6226%

демонстрация

HTML5 Video HTML5 Canvas SVG HTML5 Audio Background/Borders 2D Transforms Fonts Module CSS Media Queries Namespaces Colors Module Values & Units Selectors Traversal & Range DOM Core Level 2/.3 DOM Events Level 2/3 L2 HTML & Style ECMAScript 5 Geolocation Selector APIs Level 2 ICC Color Profiles XML Parse/Serial Semantic Elements DataURIs CSSOM View

демонстрация

Device Screen Document Viewport

Viewport PropertyDescription widthШирина Viewport в пикселях или "device-width". Windows Phone 1024 (device-width=320), iPhone 980. heightВысота Viewport в пикселях или "device-height". initial-scaleНачальный масштаб проекции. По умолчанию 1.0. maximum-scaleМаксимальный масштаб проекции. От 0.1 до minimum-scaleМинимальный масштаб проекции. От 0.1 до user-scalableМожет ли пользовать изменять масштаб проекции.

screen and (max-width:800) {... }

демонстрация

getCurrentPosition(successFn, errFn, options) watchPosition(successFn, errFn, options) clearWatch(watchID) successFn(positionObject) errFn(positionErrorObject)

демонстрация

getItem(key) setItem(key, value) removeItem(key) clear() key(index) length

HTML CSS.rule { background-image:url(" }.rule { background-image: url("data:image/png;base64,00af ed... ") }

Remote Hosted Content Доверяем или нет? Locally Hosted Content Dynamic Content Выполнение JavaScript Использование AJAX Взаимодействие с управляемым кодом Доступ к WebStorage

HTML5 + CSS3JavaScript CodeNative FeaturesMultiple Platforms

демонстрация