Подробный гайд по включению мобильного режима сайта в популярных браузерах.
Подробный гайд по включению мобильного режима сайта (эмуляция мобильного устройства) в популярных браузерах. Это полезно для тестирования адаптивной верстки или просмотра сайта так, как он выглядит на смартфонах.
Яндекс Браузер / Google Chrome
- Открой сайт, который нужно протестировать.
- Нажми F12 (или Ctrl + Shift + I / Cmd + Option + I на Mac) — откроются инструменты разработчика.
- В правом верхнем углу панели разработчика нажми на иконку Toggle Device Toolbar (или используй сочетание клавиш Ctrl + Shift + M / Cmd + Option + M).
- Выбери устройство из списка (например, iPhone, Pixel и др.) или задай свои размеры экрана.
- Обнови страницу, чтобы увидеть, как сайт выглядит в мобильном режиме.
Mozilla Firefox
- Открой сайт.
- Нажми F12 (или Ctrl + Shift + I / Cmd + Option + I на Mac) — откроются инструменты разработчика.
- В правом верхнем углу панели разработчика нажми на иконку Responsive Design Mode (или используй сочетание клавиш Ctrl + Shift + M / Cmd + Option + M).
- Выбери устройство из списка или задай свои размеры экрана.
- Обнови страницу для отображения мобильной версии.
Microsoft Edge
- Открой сайт.
- Нажми F12 (или Ctrl + Shift + I / Cmd + Option + I на Mac) — откроются инструменты разработчика.
- В верхнем меню панели разработчика нажми на иконку Toggle Device Toolbar (или используй сочетание клавиш Ctrl + Shift + M / Cmd + Option + M).
- Выбери устройство из списка или задай свои размеры экрана.
- Обнови страницу для просмотра мобильной версии.
Safari (macOS)
- Открой Safari и перейди на нужный сайт.
- Нажми Cmd + Option + I, чтобы открыть инструменты разработчика.
- В верхнем меню панели разработчика нажми на иконку Responsive Design Mode.
- Выбери устройство из списка или задай свои размеры экрана.
- Обнови страницу для отображения мобильной версии.
Opera
- Открой сайт.
- Нажми F12 (или Ctrl + Shift + I / Cmd + Option + I на Mac) — откроются инструменты разработчика.
- В верхнем меню панели разработчика нажми на иконку Toggle Device Toolbar (или используй сочетание клавиш Ctrl + Shift + M / Cmd + Option + M).
- Выбери устройство из списка или задай свои размеры экрана.
- Обнови страницу для просмотра мобильной версии.
Дополнительные советы
- Если нужного устройства нет в списке, можно вручную задать размеры экрана.
- В некоторых браузерах можно имитировать сетевое соединение (например, 3G или медленный интернет) для тестирования загрузки сайта.
- Для более глубокого тестирования используй реальные устройства или сервисы вроде BrowserStack.
Если что-то не получается, дай знать — помогу разобраться! 😊