Проверку адаптивности рекомендуем делать через браузер Google Chrome, инструкцию скинем ниже (может по некоторым пунктам слегка устарела, но суть осталась той же)
Для начала нужно открыть панель разработчика, по кнопке F12 (после персональной настройки браузера для проверки адаптивности понадобится только нажатие этой кнопки и выбор экрана)
Далее переходим в настройки:
В раздел Device
И здесь нам нужно будет настроить этот раздел.
1 - Выбираем из представленных ниже устройств самые необходимые:
— iPhone 4 - небольшие экраны смартфонов (обычно если на маленьком экране адаптивность хорошая, то она сохранится при переходе на большие экраны смартфонов, но стоит проверить на всякий случай)
— iPhone 6/7/8 Plus - большие смартфоны
— iPad
— Nexus 7 - маленькие планшеты (по умолчанию, если для них всё в порядке, то на планшетах большей диагонали также должно быть всё в порядке)
Причем проверять нужно Nexus 7 как в горизонтальном, так и вертикальном положении.
Для этого есть кнопка в браузере:
2 - Настраиваем персональные размеры десктопных экранов
Делается по кнопке "Add custom device"
Пишем понятное себе название, размеры экрана и указываем что это Десктоп:
Основные размеры и названия:
- Нетбуки (10-12 дюймов) 1024 - 600
- 13 дюймовые 1280 - 800
- 15 дюймовые 1366 - 768
- 19 дюймовые 1440 - 900
- 22 дюймовые 1680 - 1050
- 23 дюймовые 1920 - 1080
- 24 дюймовые 1920 - 1200
Переключение сайта между экранами для проверки адаптивности:
Обязательно стоит обновить страницу, чтобы получить более правильное отображение на конкретном устройстве.
Заказать разработку сайта или получить бесплатную консультацию вы можете на нашем сайте 2D Studio