Блог
Статьи о проверке мобильной версии сайтов, адаптивной вёрстке и полезных приёмах в Chrome.
Расширения Chrome для веб-разработчиков, которые стоит установить
Полезные расширения Chrome для веб-разработчика, которые закрывают пробелы DevTools: инструменты фреймворков, проверка доступности, инспекторы, мобильный вид.
Читать статью →Брейкпоинты Bootstrap 5 и адаптивная сетка: полное объяснение
Брейкпоинты Bootstrap 5, ширина контейнеров, классы адаптивной сетки, Sass-миксины и утилиты отображения. Как их настроить и проверить.
Читать статью →Как изменить user agent в Chrome без расширений
Как сменить user agent в Chrome без расширения: Network conditions в DevTools, режим устройства, client hints, флаг запуска и Playwright.
Читать статью →Инструменты разработчика Chrome: практическое руководство по DevTools
Практическое руководство по Chrome DevTools: как открыть инструменты разработчика, что делает каждая основная панель и какие горячие клавиши экономят больше всего времени.
Читать статью →Эмулятор мобильных устройств в Chrome: как пользоваться режимом устройства DevTools
Эмулятор телефона в Chrome по шагам: режим устройства, выбор и добавление моделей, замедление сети и CPU, эмуляция касаний и скриншоты.
Читать статью →Кроссбраузерное тестирование: практический чек-лист и бесплатные инструменты
Как проверить кроссбраузерность сайта с небольшим бюджетом: какие браузеры покрыть, что проверять и какие бесплатные инструменты, например Playwright, использовать.
Читать статью →Медиазапросы CSS: понятное объяснение с примерами для мобильных
Медиа запросы CSS: синтаксис, min-width и max-width, новый синтаксис диапазонов, функции для мобильных, тёмной темы и касаний, частые ошибки.
Читать статью →Google Mobile-Friendly Test больше нет: чем проверить мобильную версию сайта
Google закрыл проверку оптимизации для мобильных в декабре 2023 года. Какие бесплатные инструменты её заменяют и как проверить страницу за 10 минут.
Читать статью →Как сделать сайт адаптивным: 10 исправлений, которые действительно важны
Десять изменений, которые адаптируют сайт под мобильные устройства: от метатега viewport и резиновой раскладки до зон нажатия, форм и размеров изображений. С готовым кодом.
Читать статью →Как проверить адаптивность сайта: метод, который находит настоящие баги
Пошаговая проверка адаптивности сайта: проход по всем ширинам, проверка на моделях устройств, стресс-тест контента, масштаб и автоматические скриншоты.
Читать статью →Разрешение экрана iPhone и размер viewport: полная таблица всех моделей
Все iPhone от SE до iPhone 18 Pro Max: диагональ в дюймах, разрешение в пикселях, размер CSS viewport и плотность пикселей, с пояснениями для веб-дизайнеров.
Читать статью →Lighthouse в Chrome: аудит мобильной версии через DevTools или расширение
Как провести аудит Lighthouse для мобильных в Chrome DevTools, расширении или командной строке: настройки, чтение оценок, почему результаты скачут и что исправлять первым.
Читать статью →Мобильная версия сайта на WordPress: как сделать сайт адаптивным
Пошаговые исправления для сайтов на WordPress, которые плохо выглядят на телефонах: выбор темы, настройки блоков и конструкторов, меню, изображения, плагины и проверка.
Читать статью →Mobile first: что это такое и как применять подход в дизайне и вёрстке
Что означает mobile first для контента, макета и CSS, чем подход отличается от desktop first, пример вёрстки и типичные ошибки.
Читать статью →Проверка скорости сайта на мобильных: как измерить и ускорить загрузку
Как проверить скорость загрузки сайта на телефоне с пользой: полевые и лабораторные данные, пороги Core Web Vitals, бесплатные инструменты и исправления, которые работают.
Читать статью →Как сделать скриншот сайта в мобильной версии на компьютере
Как снять скриншот любой страницы в размере телефона прямо в Chrome на компьютере: видимая область или сайт целиком, с рамкой устройства или без.
Читать статью →Эмулятор мобильного браузера: расширение для Chrome или DevTools
Чем расширения-симуляторы телефона для Chrome отличаются от режима устройства в DevTools, что эмулирует каждый инструмент и как выбрать подходящий для мобильных проверок.
Читать статью →Чек-лист тестирования мобильной версии сайта: 30 проверок перед запуском
Практический чек-лист для тестирования сайта на мобильных: вёрстка, навигация, формы, медиа, скорость, SEO и доступность, с инструментом для каждой проверки.
Читать статью →Брейкпоинты для адаптивной вёрстки: стандартные значения и как их выбрать
Распространённые брейкпоинты CSS для телефонов, планшетов и десктопа, сравнение Tailwind, Bootstrap и Material и выбор брейкпоинтов по контенту.
Читать статью →Адаптивная вёрстка в Tailwind CSS: брейкпоинты и медиазапросы
Как устроена адаптивность в Tailwind CSS v4: брейкпоинты по умолчанию, префиксы mobile first, варианты max и диапазоны, свои брейкпоинты и проверка.
Читать статью →Как открыть локальный сайт (localhost) на телефоне и в мобильном виде
Как открыть локальный сайт на реальном телефоне или в мобильном виде: IP в локальной сети и --host, проброс портов в Chrome, туннели, адреса в эмуляторах и частые проблемы.
Читать статью →Эмулятор Android в браузере и на ПК: как проверить сайт на Android
Как проверить сайт в Chrome на Android прямо с компьютера: мобильный вид в Chrome, эмулятор Android Studio и удалённая отладка реального телефона.
Читать статью →Эмулятор iPhone для ПК: как проверить сайт на iPhone без iPhone
Как проверить сайт в Safari на iPhone, если iPhone нет: Xcode Simulator, веб-инспектор Safari, WebKit в Playwright и облачные устройства.
Читать статью →Подмена user agent: что делает user agent switcher и когда он нужен
Что меняет переключатель user agent, почему одной подмены мало для мобильного вида, при чём здесь client hints и как выбрать безопасное расширение.
Читать статью →Как открыть мобильную версию сайта на компьютере: 4 способа
Четыре способа открыть мобильную версию любого сайта на компьютере, что на самом деле показывает каждый из них и какой выбрать для быстрой проверки.
Читать статью →Эмулятор iPad в Chrome: как посмотреть сайт как на планшете
Три способа увидеть сайт в размере планшета в десктопном Chrome, актуальные размеры области просмотра iPad и почему Safari на iPad часто получает десктопную вёрстку.
Читать статью →Мета-тег viewport: что прописать и зачем
Что делает мета-тег viewport для мобильных, какая строка нужна каждой странице, каких значений избегать и что дают новые параметры viewport-fit и interactive-widget.
Читать статью →Почему сайт неправильно отображается на телефоне и как это исправить
Одиннадцать причин, по которым сайт на телефоне выглядит не так, как на компьютере: от отсутствующего тега viewport и кеша до тёмной темы и особенностей Safari.
Читать статью →Что такое адаптивный дизайн сайта: принципы и примеры
Адаптивный веб-дизайн простыми словами: откуда он взялся, основные принципы, чем адаптивный дизайн отличается от adaptive, современные приёмы CSS и тестирование.
Читать статью →Что такое viewport и как узнать его размер
Размер viewport простыми словами: CSS-пиксели и разрешение экрана, device pixel ratio, layout и visual viewport, единицы svh и dvh и как проверить свой viewport.
Читать статью →
Откройте следующий сайт в мобильном виде.
Установите расширение и запускайте превью устройств прямо в той вкладке, где уже работаете.