Бегун на утренней пробежке коротко поднимает запястье и за пару секунд считывает темп, пульс и один короткий заголовок. Экран, на котором уместилась вся эта информация, размером с ноготь, и привычная страница сайта на нём выглядит как разворот газеты, прочитанный через замочную скважину. Владельцы часов не читают, они выхватывают факты, и сайт, не готовый к такому формату, теряет этих читателей, пусть их доля и невелика. Зато аудитория преданная: человек с часами смотрит на экран десятки раз в день и делает это в ситуациях, где смартфон остаётся в кармане. Продажи Apple Watch за первые восемь лет приблизились к отметке 268 миллионов устройств, и это лишь одна платформа из целого семейства. Вопрос один: что увидит человек, когда откроет сайт с такого устройства, и какие решения стоит принять заранее, чтобы опыт не выглядел убого.
Почему обычный адаптивный макет не знает про экран на руке
Типичный адаптивный сайт строится вокруг трёх состояний: смартфон, планшет, десктоп. Самый маленький брейкпоинт чаще всего начинается от 320 пикселей, потому что ниже этой границы разработчики просто не смотрят. Между тем вьюпорт часов лежит ещё ниже: у Apple Watch в корпусе 41 миллиметр это примерно 176 на 215 логических точек, у 45-миллиметрового корпуса 198 на 242. Ни одно из этих чисел не пересекается с привычной сеткой брейкпоинтов, поэтому макет, собранный по классическим правилам, на часах либо ужимается в нечитаемую полоску, либо обрезается краями экрана.
Отдельная сложность в том, что полноценного браузера на часах почти нет. На watchOS ссылки открываются в упрощённом просмотрщике без панели вкладок и расширений, а Wear OS долгие годы обходился без штатного браузера, пока в 2015 году для платформы не выпустили компактный Opera Mini с серверным сжатием страниц. Веб доходит до запястья через несколько дверей: встроенные просмотрщики, веб-панели приложений, уведомления с картинками, голосовые помощники и страницы-компаньоны в фитнес-сервисах. Каждая дверь предъявляет свои требования, но все они сводятся к одному: контент обязан быть коротким, контрастным и мгновенным.
Как понять, приходит ли наручная аудитория, без гаданий. В отчётах аналитики смотрят колонку ширин экрана: значения в диапазоне 176-250 пикселей и есть сигнал. Пригодится и изучение строк user agent, где watchOS и Wear OS выдают себя характерными фрагментами. Если таких визитов набегает даже сотня в месяц, канал уже заслуживает внимания: доля мала, но готовность к действию у человека на пробежке обычно выше, чем у полузабытой вкладки на ноутбуке.
Маленькие матрицы и их реальные размеры в пикселях
Дисплей Apple Watch Series 9 в корпусе 41 миллиметр несёт 352 на 430 физических пикселя, версия на 45 миллиметров отдаёт 396 на 484, а Ultra 2 - 410 на 502. Для разметки система отдаёт логические точки вдвое меньше физических, поэтому верстальщик работает с числами вроде 176 на 215 или 205 на 251. Яркость серии достигает 2000 нит, у Ultra 2 - 3000 нит, и это не реклама, а прямое требование к контрасту: под прямым солнцем блёклый серый текст на белом фоне исчезает, поэтому тёмная тема и жирные акценты на часах не прихоть, а гигиена чтения.
Круглые матрицы Samsung Galaxy Watch6 дают 432 на 432 и 480 на 480 точек при плотности около 330 ppi. Квадратная сетка координат на круглом экране оставляет по углам мёртвые зоны: всё, что доходит до края, обрезается дугой. Практика сводится к простому правилу: полезная зона обязана вписываться в прямоугольник, вписанный в круг, то есть занимать центральные 70 процентов ширины и высоты. Заголовок, упирающийся в дугу, теряет последние символы, а кнопка в углу становится недостижимой для пальца.
Круглый дисплей и спецификация CSS Round Display
В консорциуме W3C существует черновая спецификация CSS Round Display, которая решает именно эту задачу. Она вводит медиа-функцию shape со значениями rect и round, дескриптор viewport-fit со значениями auto, contain и cover, а также свойства shape-inside и border-boundary. Замысел прозрачен: страница должна узнавать геометрию экрана и перестраивать макет под кривизну, а не обжиматься по прямоугольнику. Дескриптор viewport-fit уже прижился на экранах со скруглёнными углами и вырезами, и тот же приём работает для наручных корпусов.
Пока поддержка остаётся частичной, надёжнее полагаться не на новые медиа-функции, а на композицию: центрировать содержимое, отказываться от прижатых к краю блоков и держать основной текст в воображаемом прямоугольнике со сторонами около двух третей диаметра. Круглый экран прощает крупные цифры и короткие подписи в центре, но беспощаден к многострочным абзацам и таблицам. Проверочный вопрос к каждому элементу макета звучит просто: останется ли элемент читаемым, если срезать по четверти с каждого края.
Медиа-запросы для карманного вьюпорта и CSS-инструменты вёрстки
Начинается всё с мета-тега и одного честного брейкпоинта ниже 300 пикселей, который накрывает большинство наручных вьюпортов.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">@media (max-width: 250px) {
.card {
padding: 8px;
font-size: 14px;
}
.hero,
.banner,
.sidebar {
display: none;
}
}Дальше в дело идут контейнерные запросы. К 2023 году их поддержали все три движка: Chrome 105, Safari 16 и Firefox 110. Компонент с контейнером перестраивается от размеров собственной коробки, а не окна браузера, и это ровно то, что нужно часам, где один и тот же блок живёт в приложении, в уведомлении и на странице.
.tile {
container-type: inline-size;
}
@container (max-width: 250px) {
.headline {
font-size: 15px;
line-height: 1.3;
}
.subtitle {
display: none;
}
}Настройки пользователя заслуживают отдельных строк. Тёмная схема на OLED-матрице экономит заряд, потому что чёрный пиксель просто не светится, а режим пониженной анимации снимает нагрузку со слабого процессора и с глаз читателя.
@media (prefers-color-scheme: dark) {
body {
background: #000;
color: #eaeaea;
}
}
@media (prefers-reduced-motion: reduce) {
.ticker {
animation: none;
}
}Правила композиции текста и кнопок на миниатюрном экране
Базовый размер шрифта - не меньше 14 пикселей, межстрочный интервал 1.25-1.35, одна колонка без исключений. Заголовок держат в пределах 40-50 символов, иначе дуга или край экрана съедают концовку. Длинные заголовки обрезают по числу строк:
.headline {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}Правило цели касания из WCAG 2.2, принятой в октябре 2023 года, требует минимум 24 на 24 CSS-пикселя для каждого интерактивного элемента, если рядом нет компенсирующего расстояния. На часах правило усиливают: палец дрожит на бегу, поэтому цели растят до 28-32 пикселей и разводят пустотой, а не рамками. Отклик на касание обязан быть мгновенным, а подсветку тапа часто убирают, чтобы серое пятно не мешало читать.
Числа на наручном экране ведут себя капризнее букв: пропорциональные цифры прыгают по ширине при каждом обновлении секунды. Спасает табличная ширина, свойство font-variant-numeric со значением tabular-nums выравнивает разряды, и столбик значений не дёргается при перерисовке. Дробные величины округляют до одного знака, единицы сокращают до общепринятых, а время пишут без секунд, если только секунды не составляют суть показателя.
Контраст на наручном экране решает больше, чем цветовая палитра. Яркость 2000 нит нужна для улицы, но экран часто прикрывает рукав, и глаза читают с расстояния в 25 сантиметров. Отсюда формула: тёмный фон, светлый текст, одна акцентная цифра крупным кеглем. Прилагательные на таком экране умирают, числа живут.
Стратегия контента для чтения за несколько секунд
Рабочий формат для часов называют телеметрическим: одна цифра крупно, подпись под ней, деталь вторым планом. Заголовок-факт вместо заголовка-завлекалки, число вместо эпитета, глагол в настоящем времени. Читатель на запястье тратит на экран секунды, и каждая из них должна приносить новый факт, а не украшение.
Длинные тексты на часах превращают в аудио. HTML5-тег audio, подкасты через Bluetooth-наушники, синтез речи у голосовых помощников: руки заняты шагами, глаза заняты дорогой, слушают уши. Текстовая выжимка при этом остаётся, но сворачивается до трёх-четырёх предложений, а полная версия открывается уже на телефоне одной кнопкой.
Уведомления - отдельный канал доставки, порой главный. Заголовок в 30-40 символов, одна мысль, никакого стека из пяти абзацев. Нативные витрины тоже в игре: усложнения (complications) на watchOS обновляются в фоне и показывают по одной величине, плитки (tiles) на Wear OS собираются как карточки для быстрого взгляда. Платформа Fitbit позволяла писать приложения на JavaScript с разметкой SVG и без полноценного DOM, а Garmin живёт на собственном языке Monkey C. Картина отрезвляет: в некоторые двери веб заходит целиком, в другие - только короткими выдержками.
Отсюда практический вывод: под часы собирают отдельный набор сведений, а не урезанную копию страницы. Обычно это компактный JSON с заголовком, главной цифрой, временем обновления и ссылкой на продолжение:
{
"headline": "Утренний темп вырос на 4 процента",
"value": "5:12",
"unit": "мин/км",
"updated": "2026-10-21T09:40:00+03:00",
"url": "/runs/morning"
}Поля говорят сами за себя, клиенту остаётся подставить шрифт и отступы. Такой объект весит меньше одного рекламного баннера и покрывает весь наручный сценарий: заголовок, главное число, подпись, ссылка. Одна страница - один экран - одна мысль.
Инструменты для проверки сайта без подручных часов
Chrome DevTools умеет почти всё без железа. В панели устройств заводится собственная модель: 200 на 200 пикселей, плотность 2, и макет сразу показывает спину. Панель Rendering переключает тёмную схему и режим пониженной анимации, Lighthouse считает вес страницы и блокирующий код. Бюджет жёстче мобильного: сотни килобайт на всё, минимум JavaScript, системные шрифты.
Сеть тоже эмулируют честно: профиль Slow 4G в панели Network показывает, как страница ведёт себя на LTE-часах в подвале спортзала. Панель Performance помогает поймать длинные кадры: на слабом процессоре тайминг в 50 миллисекунд, незаметный на телефоне, растягивается втрое, и то, что дома летало, на руке ползёт.
Доступность на часах заслуживает отдельной строки плана. Контраст текста держат на уровне 4.5 к 1, иконки снабжают подписями для экранных дикторов VoiceOver и TalkBack, а жест никогда не остаётся единственным путём к функции: у действия обязан быть дубль кнопкой. Читатель на бегу не слышит экрана, зато очень чётко чувствует разницу между откликом за 100 миллисекунд и молчанием в полсекунды.
Отдельная проверка - автономность. Часы с LTE уходят на пробежку без телефона, и офлайн-режим из приятной опции превращается в норму. Service worker с кэшем на несколько экранов закрывает сценарий:
const cacheName = "watch-v1";
const assets = ["index.html", "watch.css", "watch.js"];
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(cacheName).then((cache) => cache.addAll(assets))
);
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((hit) => hit || fetch(event.request))
);
});Перед стартом работы над часовой версией сайта полезно зафиксировать короткий список обязательных шагов:
- собрать реальные вьюпорты целевых моделей и выбрать брейкпоинт ниже 300 пикселей;
- выстроить типографику с базовым кеглем от 14 пикселей и длиной строки до 20 знаков;
- проверить размеры целей касания по правилу 24 на 24 пикселя из WCAG 2.2;
- собрать отдельный набор данных для короткого формата вместо урезанной копии страницы;
- включить офлайн-кэш через service worker и убрать тяжёлые сценарии и сторонние шрифты;
- проверить макет под круглой маской и на максимальной яркости под открытым небом.
Доля наручного трафика у большинства сайтов измеряется долями процента, и соблазн махнуть рукой понятен. Но эти доли достаются тем, кто уже готов: страница, собранная под 176 логических точек, почти автоматически становится лучше и на больших экранах, потому что не может спрятаться за декором. Формат, который выживает на экране с ноготь, выживает где угодно, а очки со смешанной реальностью лишь продолжат эту арифметику. Часы - это не маленький смартфон, а отдельная дисциплина подачи, и осваивать её лучше до того, как она станет обязательной программой для веба.