Jak zobrazit náhled webu na různých zařízeních pomocí Google Chrome

Když vytváříte web, chcete, aby byl responzivní a přizpůsobil se různým velikostem obrazovky. Jedním ze způsobů, jak to otestovat, je použití vestavěných vývojářských nástrojů Google Chrome.

Nástroje pro vývojáře Chrome vám umožňují ladit různé aspekty vašeho webu. To zahrnuje změnu a náhled zdrojového kódu HTML a CSS. Umožňuje také ladit kód JavaScript na straně klienta a zobrazovat síťový provoz.

DevTools má také možnost zobrazit náhled vašeho webu na různých zařízeních. To zahrnuje různé typy mobilních zařízení, iPady, tablety a další.

Chcete-li otevřít panel nástrojů Zařízení v prohlížeči Google Chrome, musíte otevřít Okno Nástroje pro vývojáře Chrome:

1. Otevřete webovou stránku.
2. Klikněte pravým tlačítkem na stránku a klikněte na Kontrolovat.
3. Otevře se okno Chrome DevTools. Může se otevřít na boční nebo spodní straně vašeho prohlížeče nebo jako nové okno.
4. V levé horní části okna jsou dvě ikony. Klikněte na ikonu, která zobrazuje více zařízení různých velikostí.
5. Obrazovka se změní a ukáže vám, jak by webová stránka vypadala na mobilním zařízení.

Jak přepínat mezi různými zařízeními

Pomocí rozevíracího seznamu v horní části panelu nástrojů zařízení můžete přepínat mezi různými zařízeními.

1. Úplně nahoře na liště se zobrazí, na jakém typu zařízení si aktuálně prohlížíte svůj web. Klikněte na rozevírací seznam a vyberte jiné zařízení ze seznamu.
2. Namísto výběru stávajícího zařízení si můžete zvolit zobrazení webu v responzivním režimu. Klikněte na rozevírací seznam a vyberte Responzivní volba.
3. Vedle rozbalovací nabídky můžete také zadat vlastní šířku a výšku zařízení.
4. Místo zadávání šířky a výšky můžete velikost upravit také kliknutím a tažením za rohy okna.

Jak přidat vlastní zařízení

Pokud byste chtěli uložit vlastní šířku a výšku, můžete přidat vlastní zařízení. Panel nástrojů zařízení pak zobrazí vaše nové zařízení v rozevíracím seznamu zařízení.

1. Klikněte na rozevírací seznam se seznamem všech zařízení.
2. Klikněte na Upravit.
3. Na postranním panelu Nastavení se ujistěte, že máte Zařízení vybrána karta. Zde si také můžete prohlédnout seznam dalších zařízení, ze kterých si můžete vybrat.
4. Klikněte na Přidat vlastní zařízení.
5. Zadejte název, šířku a výšku zařízení. Nezapomeňte také vybrat typ zařízení, například zda se jedná o mobilní nebo stolní zařízení. Pokud rozšíříte Klientské rady uživatelského agenta můžete přidat další podrobnosti, jako je model zařízení, značka nebo verze.
6. Klikněte na Přidat.
7. Vraťte se do rozevíracího seznamu se seznamem všech zařízení. V seznamu uvidíte své nové vlastní zařízení.
8. Tyto podrobnosti můžete později znovu upravit tak, že se vrátíte na stránku vlastního zařízení. Klikněte na Upravit vedle názvu vašeho zařízení zahájíte úpravy.

Je velmi užitečné mít možnost zobrazit náhled svého webu na různých zařízeních a velikostech obrazovky, a to z několika důvodů.

Za prvé, můžete otestovat výkon svého webu na různých zařízeních. Některé mobily mohou mít vyšší rychlost sítě nebo omezení CPU než jiné.

Panel nástrojů zařízení umožňuje přepínat mezi různými možnostmi rychlosti sítě. To vám umožní otestovat rychlost všech volání na server nebo otestovat načítání a vykreslování dat na vašem webu.

Kromě toho si také můžete prohlédnout, jak vypadá design na konkrétním zařízení z pohledu uživatelského rozhraní. Pokud používáte Dotazy na média CSS, můžete tento nástroj použít ke kontrole, zda fungují tak, jak očekáváte.

Pomocí okna DevTools prohlížeče Google Chrome můžete otestovat, jak se vaše webové stránky přizpůsobí různým velikostem obrazovky, a zajistit, aby vaše webové stránky byly responzivní. Můžete jej také použít k testování výkonu vašeho webu a zda vaše dotazy na média fungují podle očekávání.

Nástroje pro vývojáře Google Chrome můžete použít i k jiným účelům. Můžete jej použít k ladění jakýchkoli problémů s CSS změnou CSS na kartě Styly v okně Element. To vám umožní okamžitě zobrazit jakékoli změny CSS, což může urychlit váš pracovní postup kódování.

Jak používat Google Chrome k ladění CSS

Přečtěte si další