Мобильные устройства уже составляют огромную часть, если не большинство, онлайн-читателей для многих веб-сайтов, поэтому крайне важно убедиться, что ваш сайт будет выглядеть и функционировать должным образом на iPhone или планшете. Существует множество сервисов, которые предлагают предварительный просмотр макета мобильного устройства по заданному URL-адресу, но Apple значительно упростила тестирование веб-сайтов на готовность к мобильному использованию с Safari 9 в OS X El Capitan. Новая функция под названием Responsive Design Mode позволяет быстро просматривать внешний вид веб-сайта на различных устройствах Apple, а также обычные мобильные разрешения экрана. Вот как это работает.
Важно повторить, что Responsive Design Mode - это новая функция, которая является эксклюзивной для Safari 9 в OS X El Capitan, поэтому для доступа к ней вам понадобятся как минимум эти версии браузера и операционной системы. Если ваш Mac отвечает этому требованию, вам сначала нужно включить режим разработчика Safari. Для этого запустите Safari и нажмите Safari в строке меню. Затем выберите « Настройки»> «Дополнительно» .
На вкладке «Дополнительно» в окне настроек Safari установите флажок «Показать меню разработки в строке меню». Как видно из названия параметра, в строке меню Safari справа от меню появится новое меню «Разработка». «Закладка».
Затем закройте окно настроек Safari и перейдите на веб-сайт, который вы хотите протестировать в режиме адаптивного дизайна. После того, как веб-сайт полностью загружен в вашем браузере, используйте сочетание клавиш Command-Option-R, и вы увидите, как окно браузера преобразуется в предварительный просмотр одного из нескольких разрешений мобильных устройств (вы также можете перейти в режим адаптивного дизайна, нажав кнопку « Разработать в»). в строке меню Safari и выберите « Ввести режим адаптивного дизайна» ).
Safari Responsive Design Mode позволяет просматривать внешний вид веб-сайта на всех разрешениях мобильных устройств Apple, от 3, 5-дюймового iPhone 4S до 12, 9-дюймового iPad Pro. Пользователи также могут выбрать разрешение «Retina» 1x, 2x или 3x и изменить агент браузера, чтобы имитировать поведение большинства популярных браузеров, таких как Chrome, Firefox и Edge.
Для каждого устройства и размера экрана пользователи могут щелкнуть значок устройства, чтобы переключиться между книжной и альбомной ориентацией, или, для устройств, таких как iPad Air и iPad Pro, которые поддерживают разделенный вид, можно щелкнуть, чтобы переключаться между различными макетами разделенного вида.
В то время как в Safari Responsive Design Mode отсутствуют некоторые опции аналогичных ранее существующих инструментов, его встроенная непосредственно в Safari может значительно сэкономить время веб-дизайнерам и является отличным инструментом обучения и тестирования для владельцев веб-сайтов, которые хотят убедиться, что их мобильные посетители получают лучший опыт независимо от разрешения экрана или размера.
После завершения тестирования вы можете выйти из режима адаптивного дизайна, либо закрыв окно или вкладку браузера, либо снова нажав сочетание клавиш Command-Option-R .
