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:
- Spusťte prohlížeč Google Chrome a přejděte na web, který chcete zobrazit.
- Stiskněte F12 na klávesnici pro přístup k DevTools.
- Když je režim zapnutý, klikněte na ikonu Přepnout emulaci zařízení.
- Můžete si vybrat ze seznamu zařízení iOS a Android a emulovat je.
- 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:
- Otevřete prohlížeč Chrome.
- V prohlížeči Chrome přejděte na webovou stránku, kterou chcete zobrazit v mobilní verzi.
- Klepněte pravým tlačítkem myši na webovou stránku a z nabídky vyberte možnost Prozkoumat.
- 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.
- Otevře se okno Nástroje pro vývojáře.
- Klepnutím na ikonu přepínání zařízení přepnete do režimu zobrazení mobilního webu.
- Vyberte mobilní zařízení, které chcete emulovat (volitelné).
- 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.
- Otevřete webový prohlížeč Google Chrome.
- Otevřete webovou stránku, ke které chcete přistupovat na svém mobilním zařízení.
- Chcete-li otevřít nabídku, klikněte na svislou ikonu tří teček.
- Přetáhněte kurzor myši nad položku Další nástroje v seznamu.
- Vyberte Nástroje pro vývojáře.
- Otevře se okno Nástroje pro vývojáře v prohlížeči.
- 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:
- Otevřete mobilní verzi webu, kterou chcete zobrazit.
- Klepněte pravým tlačítkem myši na webovou stránku a z nabídky vyberte možnost Prozkoumat.
- Vyberte režim responzivního designu.
- 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:
- Spusťte Firefox na vašem PC.
- Přejděte na web, který chcete zobrazit jako mobilní verzi.
- Přejděte do Nastavení kliknutím na ikonu se třemi vodorovnými pruhy.
- Zobrazí se rozbalovací nabídka, kde budete muset vybrat možnost Web Developer.
- Vyberte Režim responzivního návrhu.
- 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.
- Spusťte prohlížeč Safari.
- Přejděte na web, který chcete zobrazit jako mobilní verzi.
- Klikněte na Možnosti a poté na nabídku Vyvinout.
- Z rozevírací nabídky vyberte možnost Zadat režim responzivního návrhu.
- 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.
