Прокрустовы окна

Вадим Макеев, Opera Software

Прокрустовы окна

Прокрустовы окна

Проблема

Хочу мобильный сайт

Клиент

Мобилка 240 × 320

Мобилка

Смартфон 480 × 800

Смартфон

Планшет 1280 × 800

Планшет
iPhone
Best viewed in IE
Best viewed in Webkit

Выньте iPhone
из задницы

Бендер

Выньте iPhone из задницы

Меня тошнит от извращенцев, по сути просто Apple-зависимых идиотов, называющих себя «мобильными веб-разработчиками», у которых iPhone застрял в заднице настолько глубоко, что их мозг погибает без кислорода — Питер Поль Кох (PPK)

The iPhone Obsession и There is no WebKit on Mobile

Десктоп

Как бы Nexus

Nexus

Как бы iPhone

iPhone

Как бы iPad

iPad

На самом деле

На самом деле

Хм-м…

Фрай

Вьюпорт

Вьюпорт

			<meta name="viewport" content="width=320">
		

Придумали в Apple

			@viewport { width: 320px }
		

Переосмыслили в Opera, см. CSS Device Adaptation

Просто так

Текст

Вьюпорт по умолчанию

Symbian WebKit, Samsung WebKit, BlackBerry…

Приближаем

Приближаем

Новый вьюпорт

			<meta name="viewport" content="width=320">
		
			@viewport {
			    width: 320px
			    }
		

Фиксируем

Текст ограничен
Ширины
Вьюпорты
Ширины

Выбиратор вьюпорта

Фиксированный вьюпорт

			<meta name="viewport" content="width=1024">
		

Относительный вьюпорт

			<meta name="viewport" content="width=device-width">
		

Значение вьюпорта часто не соответствует размеру экрана

Опираемся на вьюпорт

			<meta name="viewport" content="width=320">
		
			@media screen and (device-width: 320px) {
			    Ага, мобилка!
			    }
		

Ширина устройства

			<meta name="viewport" content="width=device-width">
		
			@media screen and (max-width: 360px) {
			    Поймали Nokia 5800!
			    }
		

Как угодить всем?

Вьюпортики и вьюпортища

Как угодить всем?

Мобилка и планшет

Вставить смартфон!

Мобилка, смартфон и планшет
Адаптация

FBI

DPI

iPhone vs. Finder
Screen vs. Finder

Пикселы?
Пикселы!
Пикселы…

Пикселы

Э-э-э…

Эми

Фан!

Никому нельзя верить!

Everybody Lies!

Device DPI

			<meta name="viewport"
			      content="target-densitydpi=device-dpi">
		
Portrait
Landscape

От девайса к девайсу…

Тестирование

Тестирование
Статистика

Opera Mobile

Opera Mobile Emulator

Opera Mobile

Opera Mobile Emulator

Opera Mini

Opera Mini

Opera Mini

Opera Mini

microemu.org

opera.com/developer/tools

Android SDK

Android SDK

XCode

XCode

Сто килограммов девайсов

Девайсы

Читать дальше

Прокрустовы окна

Вадим Макеев, Opera Software

Презентация: pepelsbey.net/pres/procrustes