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