Делали ли адаптивные интерфейсы и обеспечивали кроссбраузерность
Что проверяют
Есть ли у вас реальный опыт вёрстки под разные экраны и браузеры и знаете ли вы современные инструменты, а не только медиазапросы. Следом обычно спрашивают, какие браузеры вы поддерживали и чем проверяли результат.
Как отвечать
Отвечайте на своём проекте: что за продукт, какие экраны и браузеры были в требованиях, как проверяли. Примеры и цифры берите свои, выдуманные «плюс 20% конверсии» разваливаются на первом уточнении.
Каркас по адаптивности:
- подход: mobile-first, базовые стили для узкого экрана и расширение через медиазапросы с
min-width, контрольные точки по контенту, а не по моделям телефонов; - раскладка: Flexbox и Grid,
repeat(auto-fit, minmax(...))для сеток без медиазапросов, container queries через@container, когда компонент должен реагировать на ширину своего блока, а не окна; - размеры:
clamp()для плавной типографики, единицыdvhвместо100vh, который на мобильном Safari не учитывает панели браузера; - картинки:
srcsetиsizes,<picture>для разного кадрирования, явные размеры против сдвигов макета.
Каркас по кроссбраузерности:
- договорённость: список поддерживаемых браузеров в
browserslist, по нему работают и Autoprefixer, и транспилятор; - проверка возможностей:
@supportsи данные caniuse или Baseline, прежде чем брать новое свойство; - тестирование: реальные устройства, особенно iPhone, плюс BrowserStack или Playwright с движком WebKit.
Если коммерческого опыта мало, так и скажите и покажите пет-проект или тестовое: какую проблему в Safari поймали и как исправили. Это ценнее общего рассказа.
Где спотыкаются
Сводят адаптивность к трём медиазапросам под «телефон, планшет, десктоп» и не знают про container queries.
Называют главной болью поддержку IE11 и полифилы. Сегодня основные расхождения дают Safari и iOS, где Chrome и Firefox в подавляющем большинстве случаев тоже работают на движке WebKit.
Проверяют только в эмуляции DevTools. Она не воспроизводит поведение панелей Safari, виртуальной клавиатуры и тач-событий.