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

Проблема

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

Мобилка 240 × 320

Смартфон 480 × 800

Планшет 1280 × 800

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

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

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

The iPhone Obsession и There is no WebKit on Mobile

Как бы Nexus

Как бы iPhone

Как бы iPad

На самом деле

Хм-м…

Вьюпорт

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

Придумали в Apple

			@viewport { width: 320px }

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

Просто так

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

980px — Mobile Safari
850px — Opera
800px — Android WebKit
974px — Internet Explorer

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!
			    }

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

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

Крошечные: 84, 96, 101, 128, 130, 132
Маленькие: 160, 176
Средние: 208, 220, 240
Большие: 320, 360, 480+
Десктоп: 800+

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

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

FBI

DPI

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

Э-э-э…

Фан!

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

Device DPI

Ширина экрана HTC Desire — 480px
Итоговый device-width — 300px
Всё из-за настройки Zoom: 480px ÷ 160% = 300px

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

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

Значение device-width для iPad всегда 768px,
как его ни поворачивай
Значение device-width для Galaxy Tab 600px или 1024px,
в зависимости от ориентации
При открытой клавиатуре Galaxy Tab всегда в ландшафтной ориентации, как его ни… ну, вы поняли