🎯 Простыми словами: зачем это нужно

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

Именно так происходит с сайтами: более 70% посетителей заходят на ваш сайт с телефона. И если сайт не адаптирован под маленький экран — люди просто уходят, ничего не найдя.

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

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

Все современные браузеры (Google Chrome, Яндекс.Браузер, Mozilla Firefox, Microsoft Edge) умеют показывать сайт так, как его видят на телефоне. Это называется «режим разработчика» или «режим эмуляции мобильных устройств».

✅ Пошаговая инструкция (для любого браузера)

Шаг 1. Откройте ваш сайт в браузере

Зайдите на главную страницу вашего сайта (например, https://вашасайт.бел).

Шаг 2. Включите режим просмотра «как на телефоне»

Вариант А (самый простой):

• Нажмите на клавиатуре F12 (или Fn + F12 на некоторых ноутбуках).
• Справа или снизу откроется панель разработчика.
• В верхней части этой панели найдите значок телефона/компьютера  (обычно слева вверху) и кликните на него или нажмите CTRL+SHIFT+M

Вариант Б (через меню):

• Нажмите правой кнопкой мыши в любом месте страницы.
• Выберите «Просмотреть код» (или «Исследовать элемент», «Inspect»).
• В открывшейся панели найдите значок телефона/компьютера  и кликните на него или нажмите CTRL+SHIFT+M

Шаг 3. Выберите тип устройства

В верхней части экрана найдите строчку Dimension:Responsive и нажмите её, появится выпадающий список с названиями телефонов и планшетов:

• iPhone SE (маленький экран)
• iPhone 12 Pro (средний экран)
• Samsung Galaxy S20 (Android, средний экран)
• iPad (планшет)
• Responsive (адаптивный режим — можно вручную менять ширину экрана)

Совет: проверьте сайт минимум на 3 устройствах:

1. Маленький телефон (например, iPhone SE — ширина экрана 375 пикселей).
2. Средний телефон (например, iPhone 12 Pro — ширина 390 пикселей).
3. Планшет (например, iPad Mini — ширина 768 пикселей).

Шаг 4. Прокрутите сайт сверху вниз

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

• Всё ли влезает на экран?
• Не наползают ли элементы друг на друга?
• Можно ли прочитать текст?
• Работают ли кнопки и ссылки?

Шаг 5. Проверьте не только главную страницу

Обязательно проверьте:

• Главную страницу (слайдер, баннеры, объявления, новости).
• 2–3 внутренние страницы (например, «О нас», «Новости», «Контакты»).
• Страницы с таблицами (расписание, списки и т.п.).
• Страницы с фотогалереями.