Responsive Viewer показва текущата уебстраница, рендирана в размерите на множество изгледи (viewports) на устройства един до друг — всичко на един екран. Вижте как изглежда вашият дизайн едновременно на iPhone, iPad, телефони с Android, лаптопи и десктоп компютри. Превъртете един изглед и всички останали ще го последват, което улеснява сравняването на един и същ раздел със съдържание във всеки размер на устройството.
Тестването на адаптивен дизайн (responsive design) традиционно означава промяна на размера на прозореца на браузъра или използване на лентата с инструменти за устройства в DevTools за превключване между размерите един по един. Това работи, но можете да виждате само един размер в даден момент — което прави невъзможно сравняването на това как изглежда дадена секция на мобилно устройство спрямо десктоп едновременно. Responsive Viewer решава това, като рендира страницата в множество изгледи едновременно, показани един до друг на вашия екран. Изберете от предварително зададени профили на устройства (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) или въведете персонализирани размери. Всеки изглед е напълно рендирана инстанция на страницата, а не статична екранна снимка — превъртете един и всички останали ще се превъртят до същата позиция. Това синхронизирано превъртане ви позволява да сравните точно една и съща област със съдържание във всички размери на устройствата с един поглед. Това е най-бързият начин да забележите проблеми с адаптивността: навигация, която се пренася неправилно, изображения, които преливат контейнерите си, текст, който става нечетлив на малки екрани, или разстояния, които се свиват неудобно.
Вижте текущата страница, рендирана едновременно в множество размери на изгледа, показани един до друг на вашия екран. Сравнявайте мобилни, таблетни и десктоп оформления с един поглед, без да превключвате между изгледите. Всеки изглед е напълно функционално рендиране на страницата.
Изберете от библиотека с популярни предварителни настройки за устройства: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) и Full HD Desktop (1920×1080). Предварителните настройки се актуализират с текущите размери на устройствата.
Въведете произволна ширина и височина, за да тествате нестандартни размери на изгледа. Трябва да проверите как изглежда страницата при точно 768px ширина (често срещаната контролна точка за таблет)? Просто я напишете. Могат да се добавят множество персонализирани изгледи заедно с предварителните настройки.
Превъртете един изглед и всички останали ще се превъртят до същата вертикална позиция. Това ви позволява да сравнявате точно същата секция със съдържание във всички размери на устройствата едновременно — вижте как се изобразяват главното изображение (hero area), таблицата с цени или футъра (footer) на мобилно устройство, таблет и десктоп.
Всеки изглед се показва в реалистична рамка на устройство — рамки на телефони, граници на таблети, хром на лаптоп. Визуалният контекст помага на заинтересованите страни да разберат кой изглед представлява кое устройство по време на прегледи и презентации.
Превключвайте отделните устройства, за да се съсредоточите върху конкретни сравнения на размери. Сравнявате само мобилни устройства и десктоп? Деактивирайте предварителните настройки за таблет. Трябва да виждате само iPhone? Деактивирайте всичко останало. Пълен контрол върху това кои изгледи са видими.
След внедряване на адаптивен дизайн, използвайте Responsive Viewer, за да проверите дали всяка секция изглежда правилно във всички целеви размери на устройствата. Уловете преливане на текст, проблеми с мащабирането на изображения, проблеми със срива на навигацията и несъответствия в разстоянията — всичко това в един изглед.
Покажете на клиентите как изглежда техният уебсайт на различните устройства по време на среща за преглед. Изгледът „един до друг“ е интуитивен веднага — няма нужда да обяснявате концепции за изглед (viewport). Клиентите могат да виждат мобилни устройства, таблети и десктоп едновременно.
Виждате как оформлението се счупва при определена ширина? Добавете персонализиран изглед при точната ширина в пиксели, при която възниква проблемът, и го сравнете с малко по-широки и по-тесни изгледи, за да идентифицираме коя CSS контролна точка причинява проблема.
Проверете дали дългите заглавия се пренасят правилно на мобилни устройства, дали таблиците с данни стават превъртани на малки екрани, дали входните полета на формуляри са достатъчно големи за докосване и дали бутоните (CTA) остават видими и достъпни във всички размери на устройствата.
Използвайте изгледа с множество устройства, за да създадете завладяващи изображения на адаптивния си дизайн. Направете екранна снимка на Responsive Viewer, показваща вашия дизайн в 3-4 размера на устройства за презентации в портфолио.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Responsive Viewer. Страницата преминава в режим на множество изгледи с рамки на устройства, показани един до друг.
Лентата с устройства в горната част показва наличните настройки (iPhone, iPad, Pixel, MacBook, Desktop). Щракнете върху устройствата, за да ги включите/изключите. Избраните устройства се появяват като изгледи по-долу.
Щракнете върху бутона „Custom“ и въведете специфични размери ширина × височина, за да добавите персонализиран изглед. Полезно за тестване на точни стойности на контролни точки като 768px, 1024px или 1280px.
Превъртете всеки изглед — всички останали следват до същата позиция. Сравнете как изглежда една и съща секция във всички избрани размери на устройствата едновременно.
Щракнете отново върху иконата Responsive Viewer или бутона за затваряне, за да излезете от режима на множество изгледи и да се върнете към нормалния изглед на една страница.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
