Ako zobraziť mobilnú verziu webovej stránky na počítači

Ak ste webový vývojár alebo vlastníte online firmu, možno vás bude zaujímať, ako vyzerá mobilná stránka na počítači. Vzhľad a funkčnosť vašej mobilnej stránky môžu byť kľúčové, keďže viac ako polovica internetovej prevádzky pochádza z telefónov. Zákazníci s väčšou pravdepodobnosťou zostanú na stránke dlhšie alebo si niečo kúpia, ak je to vizuálne príťažlivé. Zobrazenie na pracovnej ploche vám tiež môže pomôcť vykonať úpravy a skoršie opraviť možné problémy.

Našťastie je to pomerne jednoduchý proces. V tomto článku vám ukážeme, ako zobraziť mobilnú verziu webu na rôznych zariadeniach a prehliadačoch.

Ako zobraziť mobilnú verziu webovej stránky v prehliadači Chrome na počítači Mac

V prehliadači Chrome môžete otestovať klientske rozhranie a zistiť, či všetky súčasti webu fungujú správne, pomocou vstavaného vývojárskeho nástroja s názvom DevTools. Pretože poskytuje preddefinované možnosti zariadení, DevTools predstavuje pre vývojárov najlepší spôsob, ako rýchlo posunúť zobrazenie z počítača na mobil a naopak bez akýchkoľvek rozšírení pre vývojárov.

Môžete tiež zmeniť veľkosť obrazovky podľa svojich potrieb a upraviť šírku a výšku obrazovky, aby ste videli, ako bude vaša webová lokalita vyzerať na rôznych veľkostiach obrazovky. Ak to chcete urobiť na počítači Mac, postupujte takto:

1. Spustite prehliadač Google Chrome a prejdite na stránku, ktorú chcete zobraziť.
   
2. Stlačením klávesu F12 na klávesnici získate prístup k nástrojom DevTools.
   
3. Keď je režim zapnutý, kliknite na ikonu Prepnúť emuláciu zariadenia.
   
4. Môžete si vybrať zo zoznamu zariadení so systémom iOS a Android a napodobniť ich.
   
5. Zobrazí webovú stránku v mobilnej forme, ktorú ste si vybrali.
   

Keď skončíte, jednoducho zatvorte okno nástrojov pre vývojárov a zatvorte mobilnú verziu webu.

Ako zobraziť mobilnú verziu webovej lokality v prehliadači Chrome na počítači so systémom Windows

Ak chcete zobraziť mobilnú verziu webovej stránky na počítači so systémom Windows v prehliadači Chrome, je to dosť podobný proces:

1. Otvorte prehliadač Chrome.
   
2. V prehliadači Chrome prejdite na webovú stránku, ktorú chcete zobraziť v mobilnej verzii.
3. Kliknite pravým tlačidlom myši na webovú stránku a z ponuky vyberte možnosť Skontrolovať.
   
4. Ak chcete prejsť na Nástroje pre vývojárov, kliknite na kartu Ďalšie nástroje a vyberte položku Nástroje pre vývojárov alebo stlačením klávesu F12 otvorte Nástroje pre vývojárov.
   
5. Otvorí sa okno Vývojárske nástroje.
6. Kliknutím na ikonu prepínača zariadenia prepnete do režimu zobrazenia mobilnej stránky.
   
7. Vyberte mobilné zariadenie, ktoré chcete emulovať (voliteľné).
   
8. Teraz môžete upraviť rozmery obrazovky tak, aby vyhovovali vašim potrebám.

Ako zobraziť mobilnú verziu webových stránok v prehliadači Chrome na Chromebooku

Prístup k mobilnej verzii webovej stránky v prehliadači Chrome pomocou Chromebooku je veľmi podobný prvým dvom metódam.

1. Otvorte webový prehliadač Google Chrome.
   
2. Otvorte webovú stránku, ku ktorej chcete pristupovať na svojom mobilnom zariadení.
   
3. Ak chcete prejsť do ponuky, kliknite na zvislú ikonu troch bodiek.
   
4. Potiahnite myšou nad položku Ďalšie nástroje v zozname.
   
5. Vyberte položku Nástroje pre vývojárov.
   
6. Otvorí sa okno Vývojárske nástroje v prehliadači.
   
7. Prepnite režim zobrazenia mobilnej stránky kliknutím na ikonu prepínača zariadenia.
   

Tým sa otvorí používateľské rozhranie pre mobilnú stránku. Preferované zariadenie si môžete vybrať aj výberom značky a modelu z rozbaľovacieho poľa. Webová stránka sa obnoví ako počítačová lokalita vždy, keď zatvoríte konzolu nástrojov pre vývojárov.

Ako zobraziť mobilnú verziu webovej stránky vo Firefoxe na počítači Mac

Na zobrazenie mobilnej stránky na počítači Mac môžete použiť iné webové prehliadače, ako je Firefox. Zmena veľkosti okna prehliadača je jednou z metód, ktoré väčšina webových vývojárov používa na hodnotenie webových stránok s responzívnym dizajnom. Väčšinou sa však táto alternatíva nezdá byť prijateľná.

Tu sa hodia možnosti vývoja webu v prehliadači Firefox. Svoje webové stránky môžete prehliadať vo viacerých rozlíšeniach, ak viete, ako pristupovať k mobilným verziám webových stránok vo Firefoxe. Nasleduj tieto kroky:

1. Otvorte mobilnú verziu webovej stránky, ktorú chcete zobraziť.
2. Kliknite pravým tlačidlom myši na webovú stránku a z ponuky vyberte možnosť Skontrolovať.
   
3. Vyberte režim responzívneho dizajnu.
   
4. Vyberte veľkosť obrazovky webovej stránky.
   

Ako zobraziť mobilnú verziu webovej stránky vo Firefoxe na počítači so systémom Windows

Počítače so systémom Windows majú tiež možnosť zobraziť mobilné verzie webových stránok pomocou prehliadača Firefox. Postup:

1. Spustite Firefox na vašom PC.
   
2. Prejdite na webovú stránku, ktorú chcete zobraziť ako mobilnú verziu.
   
3. Kliknutím na vodorovnú trojčiarovú ikonu prejdite do časti Nastavenia.
   
4. Zobrazí sa rozbaľovacia ponuka, v ktorej budete musieť vybrať možnosť pre vývojárov webu.
   
5. Vyberte režim responzívneho dizajnu.
   
6. Nakoniec si môžete vybrať model smartfónu, aby ste videli, ako bude vaša stránka vyzerať na danom zariadení.
   

Ako zobraziť mobilnú verziu webovej stránky v Safari na Macu

Popísali sme, ako zobraziť webovú stránku pre mobilné zariadenia na pracovnej ploche pomocou prehliadačov Chrome a Firefox. Ale čo predvolený prehliadač Safari, ktorý sa dodáva so zariadeniami Mac? Našťastie je možné zobraziť mobilnú verziu webovej stránky aj v Safari.

1. Spustite prehliadač Safari.
   
2. Prejdite na webovú stránku, ktorú chcete zobraziť ako mobilnú verziu.
   
3. Kliknite na Možnosti a potom na ponuku Rozvinúť.
   
4. Z rozbaľovacej ponuky vyberte položku Zadať režim responzívneho dizajnu.
   
5. Teraz si môžete pozrieť mobilnú verziu webu.
   

Ďalšie často kladené otázky

Môžem si na svojom telefóne zobraziť počítačovú verziu webovej lokality?

Odpoveď je áno! Môžete prejsť z mobilnej verzie na verziu pre stolné počítače a vyskúšať si to bez použitia počítača. Postup prechodu mobilnej verzie na verziu pre počítač v prehliadači Chrome je nasledujúci:

1. Prejdite na webovú stránku, ktorú chcete vidieť v zobrazení pracovnej plochy.

2. Klepnutím na ikonu s tromi bodkami vstúpite do ponuky.

3. Teraz vyberte možnosť Zobrazenie pracovnej plochy.

Majte na pamäti, že tieto kroky sa môžu líšiť v závislosti od telefónu, ktorý používate.

odstráňte reklamy z ohňa zapaľovania 7

Zjednodušenie tvorby mobilného webu

Vývojárske nástroje sú skvelé na analýzu a úpravu mobilnej verzie webovej lokality na pracovnej ploche bez prepínania zariadení. Môžete zmeniť veľkosť obrazovky a sledovať, ako komponenty fungujú na rôznych zariadeniach. Pomocou responzívneho režimu môžete upraviť rôzne komponenty a vytvoriť webovú stránku pre rôzne veľkosti obrazoviek.

Pri navrhovaní webovej stránky by mal dizajnér vždy pamätať na to, ako vyzerá frontend stránky na telefónoch, tabletoch a stolných počítačoch. Použitie metód opísaných v článku môže tiež pomôcť vývojárovi urobiť to a tiež identifikovať, ktoré komponenty webovej lokality spôsobujú problémy, aby ich vyriešili.

Skúsili ste niekedy zobraziť mobilnú verziu webu na počítači? Ktorý prehliadač na to radšej používate? Dajte nám vedieť v sekcii komentárov nižšie.