Responzivní prohlížeč zobrazuje aktuální webovou stránku vykreslenou ve více velikostech výřezů zařízení vedle sebe — vše na jedné obrazovce. Podívejte se, jak váš design vypadá na iPhone, iPad, Android telefonech, noteboocích a desktopu současně. Posuňte jeden výřez a všechny ostatní ho následují, takže je snadné porovnat stejnou sekci obsahu napříč všemi velikostmi zařízení.
Testování responzivních návrhů tradičně znamená změnu velikosti okna prohlížeče nebo použití panelu nástrojů zařízení v DevTools pro přepínání mezi velikostmi výřezu po jedné. To funguje, ale vidíte vždy jen jednu velikost — takže není možné porovnat, jak sekce vypadá na mobilu vs. desktopu současně. Responzivní prohlížeč to řeší vykreslováním stránky ve více výřezech najednou, zobrazených vedle sebe na obrazovce. Vyberte z přednastavených profilů zařízení (iPhone 15, iPad Pro, Pixel 8, MacBook, Desktop 1440p) nebo zadejte vlastní rozměry. Každý výřez je plně vykreslená instance stránky, nikoli statický snímek — posuňte jeden a všechny ostatní se posunou na stejnou pozici. Toto synchronizované posouvání vám umožní porovnat přesně stejnou oblast obsahu napříč všemi velikostmi zařízení na první pohled. Je to nejrychlejší způsob, jak odhalit responzivní problémy: navigaci, která se špatně zalamuje, obrázky, které přetečou z kontejnerů, text, který je na malých obrazovkách nečitelný, nebo mezery, které se neúhledně sesypou.
Podívejte se na aktuální stránku vykreslenou současně ve více velikostech výřezů zobrazených vedle sebe na obrazovce. Porovnejte mobilní, tabletové a desktopové rozvržení na první pohled bez přepínání mezi zobrazeními. Každý výřez je plně funkční vykreslení stránky.
Vyberte z knihovny populárních přednastavení zařízení: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) a Full HD Desktop (1920×1080). Přednastavení jsou aktualizována s aktuálními rozměry zařízení.
Zadejte libovolnou vlastní šířku a výšku pro testování nestandardních velikostí výřezů. Potřebujete zkontrolovat, jak stránka vypadá přesně při šířce 768 px (běžný tabletový breakpoint)? Jen to napište. Vedle přednastavení lze přidat více vlastních výřezů.
Posuňte jeden výřez a všechny ostatní se posunou na stejnou vertikální pozici. To vám umožní porovnat přesně stejnou sekci obsahu napříč všemi velikostmi zařízení současně — vidíte, jak se heroická oblast, ceníková tabulka nebo zápatí vykresluje na mobilu, tabletu a desktopu.
Každý výřez je zobrazen uvnitř realistického rámečku zařízení — rámy telefonu, okraje tabletu, chróm notebooku. Vizuální kontext pomáhá zainteresovaným stranám pochopit, které zařízení výřez představuje, při revizích a prezentacích.
Přepínejte jednotlivá zařízení zapnuta a vypnuta pro zaměření na konkrétní srovnání velikostí. Porovnáváte jen mobil a desktop? Zrušte výběr přednastavení tabletu. Potřebujete vidět pouze iPhony? Zrušte výběr všeho ostatního. Plná kontrola nad tím, které výřezy jsou viditelné.
Po implementaci responzivního designu použijte Responzivní prohlížeč k ověření, že každá sekce vypadá správně napříč všemi cílovými velikostmi zařízení. Zachyťte přetečení textu, problémy se škálováním obrázků, problémy se sesypáváním navigace a nekonzistenci mezer — vše v jednom zobrazení.
Ukažte klientům, jak jejich webová stránka vypadá na různých zařízeních během revizní schůzky. Zobrazení vedle sebe je okamžitě intuitivní — není třeba vysvětlovat koncepty výřezů. Klienti vidí mobil, tablet a desktop současně.
Vidíte zalomení rozvržení při konkrétní šířce? Přidejte vlastní výřez na přesnou šířku pixelů, kde problém nastává, a porovnejte ho s mírně širšími a užšími výřezy pro identifikaci, který CSS breakpoint způsobuje problém.
Zkontrolujte, zda se dlouhé nadpisy správně zalamují na mobilu, zda se datové tabulky na malých obrazovkách stávají rolovatelné, zda jsou vstupní pole formuláře dostatečně velká pro klepnutí a zda CTA zůstávají viditelné a přístupné napříč všemi velikostmi zařízení.
Použijte zobrazení pro více zařízení k vytváření přesvědčivých obrázků pro prezentaci responzivního designu. Pořiďte snímek Responzivního prohlížeče zobrazujícího váš design na 3–4 velikostech zařízení pro prezentace portfolia.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Responzivního prohlížeče. Stránka přejde do režimu více výřezů s rámečky zařízení zobrazenými vedle sebe.
Lišta zařízení nahoře zobrazuje dostupná přednastavení (iPhone, iPad, Pixel, MacBook, Desktop). Kliknutím na zařízení je přepněte zapnout/vypnout. Vybraná zařízení se zobrazí jako výřezy níže.
Klikněte na tlačítko Vlastní a zadejte konkrétní rozměry šířka × výška pro přidání vlastního výřezu. Užitečné pro testování přesných hodnot breakpointů jako 768 px, 1024 px nebo 1280 px.
Posuňte libovolný výřez — všechny ostatní sledují na stejnou pozici. Porovnejte, jak stejná sekce vypadá napříč všemi vybranými velikostmi zařízení současně.
Znovu klikněte na ikonu Responzivního prohlížeče nebo na tlačítko zavřít pro ukončení režimu více výřezů a návrat do normálního zobrazení jediné stránky.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
