Jak zobrazit mobilní verzi webu na PC

Pokud jste webový vývojář nebo vlastníte online firmu, možná vás zajímá, jak mobilní web vypadá na počítači. Vzhled a funkce vašeho mobilního webu mohou být klíčové, protože více než polovina internetového provozu pochází z telefonů. Zákazníci s větší pravděpodobností zůstanou na webu déle nebo si něco koupí, pokud je to vizuálně přitažlivé. Zobrazení na ploše vám také může pomoci provést úpravy a opravit možné problémy dříve.

Naštěstí se jedná o poměrně přímočarý proces. V tomto článku vám ukážeme, jak zobrazit mobilní verzi webu na různých zařízeních a prohlížečích.

Jak zobrazit mobilní verzi webu v Chrome na Macu

V Chrome můžete otestovat frontend a zjistit, zda všechny součásti webu fungují správně, pomocí vestavěného vývojářského nástroje zvaného DevTools. Protože poskytuje předdefinované možnosti zařízení, představuje DevTools pro vývojáře nejlepší způsob, jak rychle posunout zobrazení z počítače na mobilní zařízení a naopak bez jakýchkoli vývojářských rozšíření.

Můžete také změnit velikost obrazovky podle svých potřeb a upravit šířku a výšku obrazovky, abyste viděli, jak bude váš web vypadat na různých velikostech obrazovky. Chcete-li tak učinit na počítači Mac, postupujte takto:

1. Spusťte prohlížeč Google Chrome a přejděte na web, který chcete zobrazit.
   
2. Stiskněte F12 na klávesnici pro přístup k DevTools.
   
3. Když je režim zapnutý, klikněte na ikonu Přepnout emulaci zařízení.
   
4. Můžete si vybrat ze seznamu zařízení iOS a Android a emulovat je.
   
5. Zobrazí web v mobilní podobě, kterou jste si vybrali.
   

Až budete hotovi, zavřete okno nástrojů pro vývojáře a zavřete mobilní verzi webu.

Jak zobrazit mobilní verzi webu v prohlížeči Chrome na počítači se systémem Windows

Pokud chcete zobrazit mobilní verzi webu na počítači se systémem Windows v prohlížeči Chrome, je to velmi podobný proces:

1. Otevřete prohlížeč Chrome.
   
2. V prohlížeči Chrome přejděte na webovou stránku, kterou chcete zobrazit v mobilní verzi.
3. Klepněte pravým tlačítkem myši na webovou stránku a z nabídky vyberte možnost Prozkoumat.
   
4. Chcete-li přejít na Nástroje pro vývojáře, klikněte na kartu Další nástroje a vyberte Nástroje pro vývojáře nebo stisknutím klávesy F12 otevřete DevTools.
   
5. Otevře se okno Nástroje pro vývojáře.
6. Klepnutím na ikonu přepínání zařízení přepnete do režimu zobrazení mobilního webu.
   
7. Vyberte mobilní zařízení, které chcete emulovat (volitelné).
   
8. Nyní můžete upravit rozměry obrazovky tak, aby vyhovovaly vašim potřebám.

Jak zobrazit mobilní verzi webu v Chrome na Chromebooku

Přístup k mobilní verzi webu v Chrome pomocí Chromebooku je velmi podobný prvním dvěma způsobům.

1. Otevřete webový prohlížeč Google Chrome.
   
2. Otevřete webovou stránku, ke které chcete přistupovat na svém mobilním zařízení.
   
3. Chcete-li otevřít nabídku, klikněte na svislou ikonu tří teček.
   
4. Přetáhněte kurzor myši nad položku Další nástroje v seznamu.
   
5. Vyberte Nástroje pro vývojáře.
   
6. Otevře se okno Nástroje pro vývojáře v prohlížeči.
   
7. Přepněte režim zobrazení mobilního webu kliknutím na ikonu přepínání zařízení.
   

Tím se zobrazí uživatelské rozhraní pro mobilní web. Můžete si také vybrat preferované zařízení výběrem značky a modelu z rozevíracího pole. Webová stránka se obnoví jako web pro počítače, kdykoli zavřete konzolu nástrojů pro vývojáře.

Jak zobrazit mobilní verzi webu ve Firefoxu na Macu

K zobrazení mobilního webu na počítači Mac můžete použít jiné webové prohlížeče, jako je Firefox. Změna velikosti okna prohlížeče je jednou z metod, kterou většina webových vývojářů používá k hodnocení webových stránek s responzivním designem. Většinou se však tato alternativa nebude jevit jako přijatelná.

Zde se hodí možnosti webového vývoje prohlížeče Firefox. Pokud víte, jak přistupovat k mobilním verzím webových stránek ve Firefoxu, můžete své webové stránky procházet v několika rozlišeních. Následuj tyto kroky:

1. Otevřete mobilní verzi webu, kterou chcete zobrazit.
2. Klepněte pravým tlačítkem myši na webovou stránku a z nabídky vyberte možnost Prozkoumat.
   
3. Vyberte režim responzivního designu.
   
4. Vyberte velikost obrazovky webu.
   

Jak zobrazit mobilní verzi webu ve Firefoxu na Windows PC

Počítače se systémem Windows mají také možnost zobrazit mobilní verze webových stránek pomocí Firefoxu. Postup:

1. Spusťte Firefox na vašem PC.
   
2. Přejděte na web, který chcete zobrazit jako mobilní verzi.
   
3. Přejděte do Nastavení kliknutím na ikonu se třemi vodorovnými pruhy.
   
4. Zobrazí se rozbalovací nabídka, kde budete muset vybrat možnost Web Developer.
   
5. Vyberte Režim responzivního návrhu.
   
6. Nakonec můžete vybrat model smartphonu a podívat se, jak bude váš web na daném zařízení vypadat.
   

Jak zobrazit mobilní verzi webu v Safari na Macu

Probrali jsme, jak zobrazit mobilní web na počítači pomocí prohlížečů Chrome a Firefox. Ale co výchozí prohlížeč Safari, který je dodáván se zařízeními Mac? Naštěstí je možné v Safari zobrazit i mobilní verzi webu.

1. Spusťte prohlížeč Safari.
   
2. Přejděte na web, který chcete zobrazit jako mobilní verzi.
   
3. Klikněte na Možnosti a poté na nabídku Vyvinout.
   
4. Z rozevírací nabídky vyberte možnost Zadat režim responzivního návrhu.
   
5. Nyní si můžete prohlédnout mobilní verzi webu.
   

Další časté dotazy

Mohu na svém telefonu zobrazit počítačovou verzi webových stránek?

Odpověď je ano! Můžete přejít z mobilní verze na verzi pro stolní počítače a vyzkoušet si ji bez použití počítače. Postup přechodu mobilní verze na verzi pro počítače v prohlížeči Chrome je následující:

1. Přejděte na webovou stránku, kterou chcete zobrazit v zobrazení na ploše.

2. Klepnutím na ikonu se třemi tečkami otevřete nabídku.

3. Nyní vyberte možnost Zobrazení plochy.

Mějte na paměti, že tyto kroky se mohou lišit v závislosti na telefonu, který používáte.

můžete použít facetime bez wifi

Usnadnění tvorby mobilních webových stránek

Vývojářské nástroje jsou skvělé pro analýzu a úpravu mobilní verze webu na počítači bez přepínání zařízení. Můžete změnit velikost obrazovky a sledovat, jak komponenty fungují na různých zařízeních. Pomocí responzivního režimu můžete upravit různé komponenty a vytvořit web pro různé velikosti obrazovek.

Při navrhování webu by měl designér vždy pamatovat na to, jak vypadá frontend webu na telefonech, tabletech a počítačích. Použití metod popsaných v článku může také pomoci vývojářům udělat to a také identifikovat, které součásti webu vytvářejí problémy, aby je opravili.

Zkoušeli jste někdy zobrazit mobilní verzi webu na počítači? Který prohlížeč k tomu raději používáte? Dejte nám vědět v sekci komentářů níže.