Адаптивность: как посмотреть сайт на телефоне заказчику

Самый честный способ посмотреть сайт на мобильном устройстве — открыть его на своём телефоне и пройти путь клиента до заявки. На компьютере телефон можно изобразить режимом устройства в браузере. Для первого взгляда этого хватает, хотя кое в чём эмулятор врёт, и как раз там прячутся поломки, из-за которых не доходят заявки.

Какой способ посмотреть сайт на телефоне самый честный?

Ваш собственный телефон. Скопируйте адрес сайта, отправьте его себе в мессенджер и откройте ссылку. Без эмуляторов и сервисов: вы видите ровно то, что увидит клиент с таким же устройством.

Одного телефона, правда, мало. То, что ровно стоит на Android, на iPhone бывает съехавшим на пару пикселей или целым блоком, и наоборот. Поэтому я прошу заказчиков взять второй телефон другой системы, у коллеги или у домашних. Это пять минут, а ловит такая проверка больше, чем любой онлайн-сервис.

Открывайте сайт в том браузере, которым человек пользуется по умолчанию, и через мобильный интернет. Скорость на сотовой сети — то, что достаётся клиенту. Офисный вайфай её приукрашивает.

Как посмотреть мобильную версию сайта на компьютере?

В Chrome и Яндекс Браузере есть режим устройства. Откройте сайт, нажмите F12, чтобы появилась панель разработчика, и затем Ctrl+Shift+M (на Mac Cmd+Shift+M). Страница сожмётся до ширины телефона, а сверху появится список моделей: можно выбрать конкретный телефон или вписать ширину руками.

Способ попроще работает вовсе без панели: сузьте окно браузера, потянув за край. Адаптивная страница начнёт перестраиваться прямо на глазах, колонки встанут друг под друга, меню свернётся в кнопку. Если при сужении появляется полоса прокрутки снизу и страницу приходится двигать вбок, адаптив сломан, и это видно без всяких инструментов.

Онлайн-сервисы, которые показывают сайт в рамке телефона, делают то же, что режим устройства. Я ими не пользуюсь: F12 под рукой всегда.

Что эмулятор не покажет?

Режим устройства меняет ширину окна и представляется сайту телефоном. Рисует страницу он при этом движком того браузера, в котором открыт. Вы смотрите на Chrome, суженный до ширины iPhone, а не на iPhone.

Самые обидные поломки живут как раз в правом столбце. Форма, у которой при открытой клавиатуре кнопка «Отправить» уезжает за край. Всплывающее окно, крестик которого на iPhone прячется под строку браузера. Кнопки, которые мышкой нажимаются идеально, а пальцем задевают соседнюю. Эмулятор их не покажет, поэтому финальную проверку делают на живом телефоне.

На каких телефонах смотреть именно ваш сайт?

На тех, с которых к вам приходят. Если на сайте стоит Яндекс Метрика, откройте «Отчеты → Технологии → Устройства». Там видно, сколько посетителей пришло со смартфонов, сколько с компьютеров и планшетов, а ниже производители и модели.

Отчёт часто удивляет. Заказчик проверяет сайт на своём новом телефоне с большим экраном, а клиенты могут приходить с недорогих моделей, где экран меньше и браузер другой. Возьмите две-три модели сверху списка и посмотрите сайт хотя бы в эмуляторе на их ширине. Если среди них есть ваш собственный телефон, повезло.

Для нового сайта, у которого статистики ещё нет, правило простое: один Android, один iPhone и один узкий экран. Узкий обычно ломается первым.

Как посмотреть на телефоне сайт, который ещё не выложен?

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

Если вам показывают только макет, то есть картинку будущего сайта, просите макет мобильной версии отдельно. Адаптив не появляется сам собой: телефонную версию тоже рисуют, и решения о том, что куда переезжает, принимаются на этапе макета. Хорошо, когда это записано ещё в техническом задании на сайт, тогда на сдаче не о чем спорить.

Что проверить на телефоне за пятнадцать минут?

Проходите сайт так, как прошёл бы клиент: с главной до отправленной заявки. Остальные страницы потом, путь к деньгам первым.

• Нет прокрутки вбок. Проведите пальцем по странице влево. Если она сдвигается, какой-то блок шире экрана: таблица, картинка, длинное слово.
• Текст читается без увеличения. Если хочется развести пальцами, шрифт мелкий или страница вообще не адаптирована (об этом ниже).
• Кнопки по пальцу. Для ориентира: нажимаемый элемент около 48 пикселей и примерно 8 пикселей до соседнего. На глаз это подушечка пальца, и промахов быть не должно.
• Меню открывается и закрывается. На двух-трёх страницах, не только на главной.
• Форма заполняется. Для телефона открывается цифровая клавиатура, кнопка «Отправить» не прячется за клавиатурой, после отправки видно, что заявка ушла.
• Телефон и адрес нажимаются. Номер открывает звонилку, адрес открывает карту.
• Всплывающие окна закрываются. Крестик виден и попадает под палец.
• Ничего не пропало. Цены, условия, кнопка заявки, которые есть на компьютере, есть и на телефоне.

Этот список короче полной приёмки сайта у подрядчика, там кроме телефона проверяют скорость, индексацию, формы и доступы. Пятнадцать минут на телефоне — это часть той приёмки, которую удобно сделать в первый же день, когда подрядчик прислал ссылку.

Почему на телефоне сайт выглядит как уменьшенный компьютерный?

Страница целиком помещается в экран, но буквы как муравьи, и чтобы прочитать хоть что-то, её приходится растягивать. Это самая грубая поломка, а причина у неё обычно одна строка в коде.

Мобильный браузер не знает, что страница умеет перестраиваться, пока она сама об этом не скажет. Viewport — служебный метатег, и без него браузер рисует страницу на ширину компьютерного экрана, обычно около 980 пикселей, и потом уменьшает её до размера телефона. Яндекс в справке для вебмастеров прямо просит адаптивные сайты ставить этот тег в служебную часть кода страницы, head.

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

Можно ли на телефоне показать меньше текста, чем на компьютере?

Желание понятное: экран маленький, хочется убрать «лишнее». Заказчики часто просят спрятать на телефоне половину описания. Для поиска это рискованная экономия.

Google индексирует и ранжирует сайт по мобильной версии и в справке просит держать в ней тот же контент, что на компьютере. Там же сказано, что содержимое, которое подгружается только по нажатию или свайпу, робот не загружает. Удалили текст из мобильной версии, и он может пропасть из поиска Google для всех устройств сразу.

Длинный текст на телефоне решают вёрсткой: подзаголовками, таблицей с прокруткой, свёрнутыми ответами в разделе вопросов. Свёрнутый блок безопасен, если текст уже лежит в коде страницы. Рискованно, когда текст подтягивается с сервера только после нажатия. Порядок блоков на узком экране тоже стоит обсудить, об этом подробно в разборе структуры сайта компании.

Что покажет проверка в Яндекс Вебмастере?

В Вебмастере есть инструмент «Проверка мобильных страниц». Выбираете сайт, вставляете адрес страницы, через несколько минут получаете ответ, оптимизирована ли она для мобильных и что поправить. Сайт должен быть добавлен в Вебмастер, а доступ к нему у вас должен быть свой. Если его нет, это повод перечитать список доступов, которые должен отдать подрядчик.

У Google был похожий тест, но его закрыли. Сейчас такую проверку можно запустить в Lighthouse, встроенном в Chrome. Для заказчика хватает Вебмастера: он отвечает на вопрос «видит ли поиск страницу мобильной».

Результат проверки — оценка технических параметров страницы. Удобство для человека проверка не оценивает, и форму, у которой кнопка прячется за клавиатурой, руками всё равно придётся проверить.

Регулярно вижу одну и ту же историю: сайт приняли по созвону с экрана ноутбука, а через неделю владелец открыл его в очереди с телефона и увидел форму, которую не отправить. Пятнадцать минут на телефоне до подписи акта дешевле этой недели.

Герман Садуртдинов

Как написать подрядчику замечание по мобильной версии?

«На телефоне всё криво» исправить нельзя, это приглашение к переписке на три дня. Подрядчик откроет сайт на своём телефоне, увидит, что всё ровно, и спросит, что имелось в виду. Замечание, которое исправят с первого раза, собирается из пяти частей.

Все замечания удобно собрать в один документ и отправить разом. Правки так идут одним кругом, и в договоре их не приходится считать заново.

Где заканчивается то, что заказчик проверит сам?

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

Дальше начинается то, чего с телефона не видно. Почему вёрстка ломается на конкретной ширине, как переложить блоки так, чтобы на узком экране не потерялся смысл, сколько весят картинки и почему страница грузится долго на сотовой сети. Это работа дизайнера и верстальщика. Если замечаний десятки и они повторяются на каждой странице, скорее всего, телефонную версию никто не проектировал, её получили сжатием компьютерной. Такой сайт дешевле пересобрать с мобильного макета, чем латать по скриншотам.

Частые вопросы

Читайте также

Сайт и подрядчик SSL-сертификат: зачем нужен и кто его продлевает (2026) Разбор · 10 мин Сайт и подрядчик Кому принадлежат права на дизайн сайта после сдачи (2026) Разбор · 12 мин Сайт и подрядчик Какие доступы нужны от разработчика сайта и на чьё имя их забрать (2026) Разбор · 11 мин Сайт и подрядчик Какие разделы нужны сайту компании и в каком порядке (2026) Разбор · 12 мин Сайт и подрядчик Техническое задание на сайт: как составить (2026) Разбор · 10 мин Сайт и подрядчик Сколько времени занимает разработка сайта (2026) Разбор · 9 мин

Герман Садуртдинов — дизайнер, основатель студии V3 Creative. Пишу о том, как дизайн влияет на деньги, а не на вкус.

Об авторе · ← Все статьи