Сайт отлично смотрелся на ноутбуке. А потом я открыл его на телефоне⁠⁠

Четвёртый модуль курса Singularity: собрать интерфейс, который общается с готовым бэкендом. Я радостно закончил страницу, открыл на ноутбуке и остался доволен: аккуратные блоки, понятная кнопка, фото красиво разворачивается.

Потом отправил ссылку другу, и он написал: «Кнопка за экраном, текст мелкий, ничего не понятно».

Первая реакция: быть этого не может

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

Что оказалось

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

Вторая причина: я задавал размеры в пикселях, как будто экран у всех такой же, как у меня. На ноутбуке всё влезало, на телефоне нет.

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

Что я понял

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

Теперь это правило: перед тем как отправлять ссылку, я открываю её на телефоне.