До iPhone «мобильный веб» в Казахстане означал WAP: страницы без CSS, без картинок, для Nokia с экраном 128×128. Казахстанские операторы - Beeline, K-Cell, Neo - предлагали WAP-услуги. Разработчики делали отдельные WAP-версии или игнорировали мобильных пользователей полностью.
iPhone изменил ожидания за один день. Safari на WebKit - настоящий браузер. Стив Джобс показал нью-йоркский NYT без мобильной версии. Пользователи поверили что веб в кармане - это реально.
В Казахстане iPhone появился позже официально, но привозили из-за рубежа с первых месяцев. К концу 2007 года казахстанские разработчики получали первые вопросы: «почему наш сайт так выглядит на iPhone?»
Проблема: Safari рендерил в 980px
<!-- БЕЗ viewport meta: Safari масштабировал страницу в 980px,
потом уменьшал под экран 320px.
Текст нечитаем. Нужно зумировать каждый раздел.
С viewport meta: страница рендерится в ширину устройства. -->
<!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">
<!-- Этот тег изобрела Apple специально для iPhone -
не был стандартом W3C в 2007 году -->
<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: 220px; }
#main { margin-right: 240px; }
/* iPhone: max-width 480px */
@media screen and (max-width: 480px) {
#wrapper { width: 100%; padding: 0 10px; }
#sidebar { display: none; }
#main { margin-right: 0; }
/* Минимум для касания пальцем: 44px высота */
a, button {
display: block;
padding: 12px 16px;
font-size: 16px; /* Ниже 16px → Safari авто-зум */
}
/* Навигация: горизонталь → вертикаль */
nav li { display: block; border-bottom: 1px solid #ddd; }
nav li a { display: block; padding: 12px; }
/* Картинки не выходят за экран */
img { max-width: 100%; height: auto; }
/* Таблицы с прокруткой */
table { display: block; overflow-x: auto; }
}
</style>
</head>
<body>...</body>
</html>
Правило 16px: Safari и авто-зум
/* Safari iOS авто-зумировал любой input с font-size < 16px при фокусе.
Казахстанские формы с мелким шрифтом - регистрация, обратная связь -
резко увеличивались и смещали layout. */
/* Фикс для всех форм на казахстанских сайтах: */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
font-size: 16px; /* Ниже 16px → авто-зум на iOS */
}
/* Это поведение сохраняется в iOS Safari до сегодня.
2007 год решил 2024 год. */
Touch-события: новая модель
// touchstart / touchmove / touchend - новые события, 2007 год
// До iPhone браузеры не знали "касания"
document.addEventListener('touchstart', function(e) {
var touch = e.touches[0];
console.log(touch.clientX + ', ' + touch.clientY);
}, false);
// Проблема: задержка 300мс при click
// Safari ждал 300мс - не одиночное касание или двойное (зум)?
// Решение 2007 года: использовать touchend вместо click
function fastTap(element, callback) {
var startX, startY;
element.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
}, false);
element.addEventListener('touchend', function(e) {
var endX = e.changedTouches[0].clientX;
var endY = e.changedTouches[0].clientY;
// Если палец почти не двигался - это tap, не scroll
if (Math.abs(endX - startX) < 10 && Math.abs(endY - startY) < 10) {
e.preventDefault();
callback.call(this, e);
}
}, false);
}
// Библиотека fastclick.js появилась в 2013 - решала именно это.
// Chrome 32 (2014) добавил touch-action: manipulation.
Казахстанский мобильный интернет 2007
В 2007 году мобильный интернет в Казахстане был медленным: GPRS (50-100 кбит/с) у большинства. 3G только начинался в крупных городах. Загрузить страницу 500KB по GPRS - минута.
Оптимизация под мобильный в Казахстане 2007-2009 означала два уровня:
- Viewport и layout - чтобы сайт был читаем без зума
- Производительность - чтобы страница грузилась на GPRS за разумное время
<!-- Оптимизация для медленных соединений (актуально для KZ 2007): -->
<!-- Один CSS-файл вместо нескольких: -->
<link rel="stylesheet" href="/css/all.min.css">
<!-- Спрайты для иконок - один HTTP-запрос вместо 20: -->
<style>
.icon { background-image: url('/img/sprites.png'); background-repeat: no-repeat; }
.icon-home { background-position: 0 0; width: 16px; height: 16px; }
.icon-search { background-position: -16px 0; width: 16px; height: 16px; }
</style>
<!-- Скрипты в конце body - страница рендерится до загрузки JS: -->
</head>
<body>
<!-- контент -->
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
</body>
Итог: что изменил iPhone для Казнета
iPhone создал новые требования к казахстанским сайтам. До 2007 года клиент никогда не спрашивал «а как это выглядит на мобильном». После - это стал стандартный вопрос.
Мобильный трафик в Казнете начал расти с 2008: iPhone, затем первые Android-устройства. К 2010 году мобильный трафик на крупных казахстанских порталах достигал 15-20%. К 2013 - превысил десктоп.
Разработчики, которые освоили viewport, media queries и touch-события в 2007-2008, были готовы к этому сдвигу. Те, кто ждал - переделывали сайты в спешке.