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

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

The iPhone Obsession и There is no WebKit on Mobile

				<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+

• Ширина экрана 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 всегда в ландшафтной ориентации, как его ни… ну, вы поняли

• QuirksMode
• Спецификация WebView для Android
• Набор тестов для понимания вьюпорта

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

• pepelsbey.net
• @pepelsbey и @ODevRel_ru
• pepelsbey@opera.com

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