Как сверстать сайт под iPhone 8 и не сойти с ума: адаптивность без страданий

Казалось бы — 2025 год на дворе, зачем верстать сайт под старенький iPhone 8? У всех же давно флагманы, широкоформатные экраны и скорость 5G. Ан нет. По статистике, до 15% мобильного трафика в ряде ниш — это устройства, чья дата выхода была до 2020 года. А в некоторых случаях — до 2017. Да, именно там живёт iPhone 8.

Если ты хочешь, чтобы твой сайт реально продавал и не отсеивал клиентов, адаптивная вёрстка под подобные устройства — не прихоть, а необходимость. И сегодня мы разложим всё по полочкам: от "что учесть" до "как не рвать волосы на голове".

Потому что пользователи не обновляют смартфоны каждый год. Особенно в регионах, особенно в возрастных сегментах, особенно если телефон работает "ещё нормально".

•

iPhone 8 до сих пор активно используется:

• экран с диагональю 4.7 дюйма

• разрешение 375x667 px

• устаревший, но популярный WebKit Safari

• нюансы с поддержкой CSS-свойств и медиазапросов

Невнимание к таким устройствам приводит к тому, что сайт:

"прыгает" при загрузке

выглядит сжатым или расплывчатым

требует горизонтальной прокрутки

теряет до 10–20% потенциальных лидов на мобильном

Адаптивная вёрстка — это способ построения сайта, при котором одна и та же страница корректно отображается на разных экранах. Блоки не ломаются, текст не уползает, элементы не наезжают друг на друга.

Важно не путать с отдельной мобильной версией сайта. У неё свой адрес (m.site.ru) и свой код, что удваивает работу и часто приводит к ошибкам. Адаптивность же работает через гибкие сетки, медиазапросы и относительные единицы измерения.

Это означает:

• ширина блоков в % или vw вместо px

• шрифты — в em, rem, а не px

• отступы — зависят от экрана, а не заданы жёстко

• изображения адаптируются, а не сжимаются произвольно

Создание мобильного приложения для iOS

1. Работай от макета или дизайн-системы

Если дизайн изначально не учитывает iPhone 8, адаптировать его — боль. Проси у дизайнера сетки в 375px шириной или сам создавай breakpoint под это разрешение.

2. Используй meta viewport корректно

Без этого весь адаптив — просто декорация. Именно этот тег сообщает браузеру, что нужно учитывать ширину устройства, а не отрисовывать десктопный сайт уменьшенным.

3. Медиа-запросы — твой щит и меч

Создай отдельный @media-блок для экранов до 375px:

@media screen and (max-width: 375px) {
body {
font-size: 15px;
}
.container {
padding: 15px;
}
.btn {
font-size: 14px;
padding: 12px 20px;
}
}

Не ленись выделять устройства по ширине, и iPhone 8 отблагодарит тебя стабильным отображением.

4. Проверяй на реальном устройстве (или хотя бы в симуляторе)

Chrome DevTools не даст полной картины. Тени, сглаживание, анимации — всё может вести себя иначе. Используй Xcode-симулятор, BrowserStack или реальный девайс. Если у тебя iPhone 8 — ты царь адаптивной вёрстки.

5. Будь готов к компромиссам

Не пытайся втиснуть в 375px то, что не вмещается. Минимализм — твой союзник. Сокращай, упрощай, не бойся прятать второстепенное за раскрывающимися блоками.

• Кнопки: не влезают, или к ним сложно попасть пальцем

• Шапка сайта: логотип + меню + кнопка = каша

• Формы: placeholder выезжает за поле, кнопка отправки уезжает вниз

• Слайдеры: не адаптируются и выходят за границы экрана

• Иконки: не SVG, а PNG — и привет, мыло

Каждый из этих пунктов — реальная потеря в доверии. А на мобильном доверие формируется за 2–3 секунды.

1. Учитывай ширину 375px как критическую

2. Работай с гибкими сетками (flex, grid с fr, auto)

3. Проверяй кликабельность: отступы, padding, hit-zones

4. Тестируй текстовые блоки на переполнение

5. Используй object-fit для изображений

6. Не экономь на min-width, overflow-wrap, word-break

7. Протестируй сайт в горизонтальной ориентации экрана

• Подружись с Tailwind или Bootstrap — они уже решают половину проблем

• Не гонись за пиксель-перфект на каждом разрешении — пользователю важно удобство

• Сначала сверстай мобильную версию, потом расширяй (mobile-first работает!)

• Используй clamp() для шрифтов — шикарная штука, особенно в сочетании с vw

• Проверяй интерактивные элементы через :focus-visible — это про доступность, но поможет и с адаптивом

Разработка мобильной версии сайта должна быть частью любого проекта с самого начала. Нельзя воспринимать адаптив как "дополнительную настройку". Это не настройка. Это основа.

И если ты действительно хочешь, чтобы пользователи не уходили с сайта только потому, что он неудобен на их старом iPhone, тебе нужна адаптивная вёрстка как воздух. И опыт.

Можно пробовать самому — читать доку, тестировать, экспериментировать. Можно взять фреймворк. Можно собрать с шаблона. Всё это — путь.

А можно отдать в руки тем, кто сделает это быстро, чисто и без боли. Мы делаем сайты, которые выглядят одинаково хорошо на iPhone 8, MacBook Pro и экране холодильника (почти).

Пока другие спорят, насколько старым должен быть девайс, чтобы его игнорировать, мы просто берём и делаем, чтобы работало везде.