До 29 июня 2007 года «мобильный веб» означал WAP: страницы без CSS, без картинок, для Nokia с экраном 128×160 пикселей. Никто не ожидал, что WAP-сайты выглядят как настоящие.
iPhone изменил ожидания за один день. В нём работал Safari на WebKit - настоящий современный браузер. Стив Джобс продемонстрировал загрузку настоящего сайта New York Times, не мобильной версии. «Интернет в кармане». Пользователи поверили.
Проблема: тот сайт New York Times был разработан для вьюпорта 1024×768. На экране 320×480 Safari рендерил его в 980px и масштабировал. Каждый сайт становился крошечным нечитаемым миниатюрой, в которую нужно было зумить пальцами.
Тег viewport: изобретение Apple
Apple ввела <meta name="viewport"> специально для iPhone - это не был стандарт W3C:
<!-- Без этого: Safari рендерит при 980px и масштабирует под экран -->
<!-- С этим: Safari использует реальную ширину устройства -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Для веб-приложений, имитирующих нативные -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
Этот тег стал де-факто стандартом когда Android его принял. W3C стандартизировал годами позже.
Оптимизация страницы под iPhone (2007)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сайт, совместимый с iPhone</title>
<style type="text/css">
/* Десктоп по умолчанию */
#wrapper { width: 960px; margin: 0 auto; }
#sidebar { float: right; width: 200px; }
#main { margin-right: 220px; }
/*
* ВНИМАНИЕ: iPhone идентифицировался как "screen", а не "handheld".
* Поэтому @media handheld не работал на iPhone.
* WebKit поддерживал CSS3 media queries рано - используем их:
*/
@media screen and (max-width: 480px) {
#wrapper { width: 100%; }
#sidebar { display: none; }
#main { margin-right: 0; }
/* Минимальный размер для комфортного нажатия пальцем: 44px */
a, button {
display: block;
padding: 10px;
font-size: 16px;
/* 16px - магическое число iPhone:
ниже 16px → Safari автоматически зумил при фокусе на input */
}
/* Навигация: горизонтальные вкладки → вертикальный список */
#nav li { display: block; border-bottom: 1px solid #ccc; }
#nav li a { display: block; padding: 12px 16px; font-size: 17px; }
/* Картинки не выходят за экран */
img { max-width: 100%; height: auto; }
/* Таблицы - самое сломанное на мобильном */
table { display: block; overflow-x: auto; }
}
</style>
</head>
<body>...</body>
</html>
Правило 16px и авто-зум
Safari автоматически зумировал в любой <input> с шрифтом меньше 16px при фокусе:
/* Фикс форм для iPhone - 2007 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
font-size: 16px; /* Ниже 16px → автоматический зум Safari */
}
Это поведение сохраняется в iOS Safari сегодня, семнадцать лет спустя.
Touch-события: новая модель событий
iPhone ввёл DOM-события, которых не существовало в браузерах до него:
// touchstart / touchmove / touchend - новое в 2007 году
document.addEventListener('touchstart', function(e) {
var touch = e.touches[0];
console.log('Касание: ' + touch.clientX + ', ' + touch.clientY);
});
// Задержка 300мс при клике:
// Safari ждал 300мс чтобы отличить одиночное касание от двойного (зум).
// Решение: использовать touchend вместо click на мобильном
function fastClick(element, callback) {
var startX, startY;
element.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});
element.addEventListener('touchend', function(e) {
var endX = e.changedTouches[0].clientX;
var endY = e.changedTouches[0].clientY;
if (Math.abs(endX - startX) < 10 && Math.abs(endY - startY) < 10) {
e.preventDefault();
callback.call(this, e);
}
});
}
Задержка 300мс породила библиотеку fastclick.js (2013). Она существовала исключительно чтобы решить одну эту проблему - до тех пор пока Chrome 32 (2014) не добавил touch-action: manipulation.
Что реально изменил iPhone
Сабдомен m. был ошибкой. Индустрия строила отдельные мобильные сайты в 2007-2012-м, а потом 2012-2016-м сносила их и строила responsive-дизайн. Правильный ответ - fluid layouts + media queries - существовал технически, но не был принят полностью до тех пор, пока Итан Маркотт не назвал его «Responsive Web Design» в 2010 году.
Производительность. EDGE-соединение iPhone давало 150-200 кбит/с. Страницы весом 500КБ, приемлемые на ADSL, означали 20 секунд загрузки. Оптимизация производительности для мобильных стала отдельной дисциплиной.
Размеры тач-таргетов. Физические кнопки кликаются точно. Пальцы - нет. Ссылки-строки по 24px высотой, разработанные для мыши, стали неудобными. Apple установила минимум 44×44pt.
iPhone в 2007 году был громчайшим возможным сигналом: веб - не только десктоп. Нам потребовалось ещё пять лет чтобы полностью это принять.