Responsivní webdesign je nezbytný, protože stále více uživatelů přistupuje k internetu pomocí mobilních zařízení. Aby bylo zajištěno, že se tvá webová stránka zobrazí správně na různých velikostech a rozlišení obrazovek, nabízejí Chrome Developer Tools mocný nástroj pro testování responsivního designu. V této příručce ti ukážu, jak aktivovat mobilní zobrazení a simulovat různé velikosti zařízení, abys mohl/a zkontrolovat přizpůsobivost tvé webové stránky.
Nejdůležitější poznatky
- Můžeš aktivovat mobilní zobrazení pomocí nástrojů pro vývojáře, abys mohl/a testovat rozložení své stránky na různých zařízeních.
- Je užitečné vybrat specifická zařízení s jejich standardním rozlišením a poměrem stran.
- Funkce jako napodobení dotyku a zoom pomocí tahu prsty jsou také užitečné pro emulaci uživatelského zážitku z mobilních zařízení.
Krok za krokem
Chceš-li využívat mobilní zobrazení v Chrome Developer Tools, postupuj podle těchto jednoduchých kroků:
1. Aktivace mobilního zobrazení
Aby ses dostal/a k mobilnímu zobrazení, otevři Chrome Developer Tools. Můžeš to udělat buď přes nabídku, nebo klávesovou zkratkou. Klikni na tlačítko "Přepnout nástroj pro zařízení" nebo použij klávesovou zkratku Command + Shift + M (macOS) nebo Control + Shift + M (Windows).
Jakmile aktivuješ mobilní zobrazení, webová stránka se přepne do módu pro mobilní zařízení. Nyní můžeš vidět, jak stránka vypadá na mobilním zařízení.
2. Výběr a úprava velikosti zařízení
V horní liště DevTools je rozbalovací nabídka, ve které můžeš vybrat rozměry obrazovky. Výchozí nastavení je "Responsivní". Můžeš toto nastavení změnit, abys manuálně upravil/a rozlišení a velikost. Pokud hledáš konkrétní velikost zařízení, klikni na seznam a vyber například iPhone 12 Pro nebo Pixel 7 ze seznamu.
DevTools nyní zobrazí skutečné rozlišení vybraného zařízení. Měj na paměti, že skutečné rozlišení, které prohlížeč využívá, se může lišit od nativního rozlišení zařízení.
3. Porozumění poměru zařízení k počtu pixelů
Důležitým faktorem při testování je "Poměr pixelů zařízení". Poměr pixelů zařízení můžeš změnit otevřením tříbodového menu a změnou příslušných hodnot. Poměr pixelů zařízení popisuje poměr fyzických pixelů k počtu pixelů, které prohlížeč využívá.
Pro iPhone 12 Pro například poměr pixelů zařízení činí 3:1. To znamená, že tři fyzické pixely představují jednotku v prohlížeči. Nativní rozlišení je mnohem vyšší, aby bylo zajištěno, že obrázky a texty jsou ostré a jasně viditelné.
4. Úprava rozložení a zobrazení
Jelikož můžeš nyní testovat mobilní zobrazení s vybraným zařízením, zjistíš, že můžeš také upravit rozměry. Klikni a táhni rohy nebo strany oblasti zobrazení, abys vyzkoušel/a různé šířky a výšky.
Dále můžeš změnit orientaci, například z portrétu na krajinu, abys viděl/a, jak se rozložení chová v různých podmínkách.
5. Simulace dotykových vstupů
Dalším zajímavým prvkem je možnost simulace dotykových gest. Při aktivaci ukazatele myši bude nahrazen ukazatelem prstu. Tím si budeš moci simulovat, jak uživatelé interagují na mobilní webové stránce, posouváním nebo navigací v menu.
Pro provedení gesta Pinch-to-Zoom podrž klávesu Shift a táhni myší. Tím emuluješ gesto, které by uživatelé na reálném zařízení použili.
6. Testování rychlosti načítání stránky
Pro testování rychlosti načítání webových stránek můžete použít funkci omezování. Tato funkce vám umožní měnit rychlost datové komunikace a simulovat tak, jak vaše webová stránka funguje v nepříznivých síťových podmínkách.
Změňte nastavení omezování na "Low-End Mobile" nebo "Bez omezování" pro srovnání efektů. Zjistíte, že se webová stránka načítá různě rychle, což vám pomůže testovat uživatelskou zkušenost při pomalých připojeních.
7. Vytvoření snímků obrazovky
Pokud potřebujete statický obraz své simulované mobilní verze, můžete snadno získat snímek obrazovky přímo z nástrojů pro vývojáře. Klepněte na příslušnou možnost v panelu nástrojů a automaticky si stáhněte snímek obrazovky.
8. Obnovení výchozích hodnot
Pokud chcete obnovit nastavení mobilního zobrazení na výchozí hodnoty, můžete tak učinit také v nástrojích pro vývojáře. Klepněte na tlačítko pro obnovení všech změn na výchozí hodnoty.
Tímto způsobem můžete rychle provést nový test s výchozími nastaveními zařízení.
Shrnutí
V této příručce jste se naučili, jak aktivovat a konfigurovat mobilní zobrazení v nástrojích Chrome Developer Tools. Můžete simulovat různá zařízení, upravit poměr pixely zařízení, vyzkoušet dotykové gesta a otestovat rychlost načítání vaší stránky. Porozumění a správné použití těchto funkcí vám pomohou efektivně optimalizovat responzivní design vaší webové stránky.
Často kladené otázky
Jak aktivovat mobilní zobrazení v nástrojích pro vývojáře Chrome?Můžete aktivovat mobilní zobrazení otevřením nástrojů pro vývojáře a klepnutím na tlačítko "Přepnout na panel zařízení" nebo použitím klávesové zkratky Command + Shift + M (macOS) nebo Control + Shift + M (Windows).
Mohu přidat vlastní velikosti zařízení?Ano, můžete vytvářet vlastní velikosti a zařízení v nástrojích pro vývojáře pro provedení specifických testů.
Co je Device Pixel Ratio?Device Pixel Ratio je poměr fyzických pixelů displeje k počtu pixelů, které prohlížeč zobrazuje.
Jak simulovat dotyková gesta?Chcete-li simulovat dotyková gesta, změňte kurzor myši na ukazatel prstu tím, že přepnete zobrazení do režimu dotykové obrazovky a tažením myší v režimu Shift.
Jak otestovat rychlost načítání mé webové stránky v mobilním zobrazení?Můžete použít funkci omezování v nástrojích pro vývojáře k simulaci rychlosti datové komunikace a zjistit, jak vaše webová stránka funguje v různých síťových podmínkách.
