Přepnout na mobilní zobrazení

Náhled mobilního zobrazovacího okna jedním kliknutím pro libovolnou stránku.

Moderní webové publikum se nenudí. V práci přeskakuje z 27palcových monitorů na kapesní obrazovky ve vlaku a očekává, že každý web bude působit na míru oběma stranám. Pro designéry, vývojáře, marketéry a dokonce i pro běžné uživatele to vyvolává každodenní otázku: „Jak bude tato stránka vypadat na skutečném telefonu?“ Na ni vám odpoví vlastní DevTools v Chromu – poté, co se prohrabete nabídkami, panely a spoustou rámců zařízení. Přechod na mobilní zobrazení zkrátí tuto cestu na jedno kliknutí nebo zkratku. Klepněte na ikonu panelu nástrojů (nebo stiskněte Alt + M) a aktuální stránka se okamžitě zobrazí na obrazovce o velikosti telefonu. Měkké šedé pozadí izoluje stránku od zbytku okna prohlížeče, takže váš obsah je hlavní hvězdou a zároveň vám vizuálně připomíná, že je aktivní mobilní zobrazení. V rohu se vznáší malý odznak zobrazující aktuální předvolbu zařízení – počínaje iPhonem 14, Rozšíření je dodáváno se třemi nejčastěji požadovanými zarážkami – iPhone 14 (390 × 844 px), Pixel 7 (412 × 915 px) a iPad mini (768 × 1024 px). Každá předvolba upravuje meta tag viewport, šířky prvků a chování při posouvání tak, aby napodobovala vzhled zvoleného zařízení. Kdo z toho má prospěch? Front-end vývojáři dokáží zachytit regrese rozvržení během několika sekund, aniž by museli otevírat DevTools – ideální při manipulaci s více větvemi nebo při přípravě serverů. UI/UX designéři si před odesláním nových kompozic Figma do vývoje rychle prověří jejich příčetnost. Týmy pro zajištění kvality mohou do automatizovaných testovacích sad vkládat klávesové zkratky pro rychlejší responzivní testování. Tvůrci obsahu a marketéři prohlížejí náhledy newsletterů, vstupních stránek a sociálních médií, aby zajistili čitelnost na malých obrazovkách. Agenti zákaznické podpory, kteří reprodukují problémy hlášené mobilními uživateli, již nepotřebují fyzická zařízení ani simulátory. Pedagogové a studenti, kteří zkoumají koncepty responzivního designu, získají přístupný a z hlediska oprávnění chráněný sandbox. Ať už dolaďujete proces platby jen pár minut před spuštěním, nebo učíte ve třídě plné začínajících vývojářů, toto rozšíření se začlení do vašeho pracovního postupu s téměř nulovou křivkou učení.