Potrebujete na svojom počítači pristupovať k emulátoru prehliadača smartfónu, aby ste otestovali mobilnú verziu webovej stránky, o ktorú máte záujem? Možno ste webový vývojár alebo sa ním chcete stať a potrebujete simulovať mobilný prehliadač pre projekt, na ktorom pracujete. Bez ohľadu^(Regardless) na vaše dôvody, tu je návod, ako získať prístup k emulátoru mobilného prehliadača v prehliadačoch Google Chrome^{(Google Chrome)} , Mozilla Firefox , Microsoft Edge a Opera:

Ako zapnúť a používať emulátor mobilného prehliadača v prehliadači Google Chrome^{(Google Chrome)}

V prehliadači Google Chrome^{(Google Chrome)} prejdite na webovú stránku, ktorú chcete zobraziť v emulátore mobilného prehliadača. Potom stlačte CTRL + SHIFT + I na klávesnici alebo pomocou myši kliknite na tri zvislé bodky v pravom hornom rohu, čím otvoríte ponuku „Prispôsobiť a ovládať Google Chrome“^{(“Customize and control Google Chrome”)} . Vyberte Ďalšie nástroje a^{(More tools, )} potom Nástroje pre vývojárov^{(Developer Tools)} .

Získajte prístup k nástrojom pre vývojárov^{(Access Developer Tools)} v prehliadači Google Chrome^{(Google Chrome)}

Kliknite alebo klepnite na tlačidlo „Prepnúť panel s nástrojmi zariadenia“^{(“Toggle device toolbar”)} (vyzerá ako smartfón vedľa tabletu) alebo stlačte CTRL + Shift + M na klávesnici. Tým sa aktivuje panel s nástrojmi zariadenia, kde sa načíta mobilná stránka. Panel s nástrojmi zariadenia štandardne používa responzívnu^(Responsive) šablónu pre web, ktorý ste načítali. Kliknite^(Click) naň a vyberte mobilné zariadenie, ktoré chcete emulovať. Vaše možnosti zahŕňajú veľa iPhonov, iPadov, Surface Duo , dve zariadenia Samsung Galaxy a simulátor mobilného prehliadača Moto G4 pre PC.^{(Moto G4 mobile)}

Ako povoliť emulátor mobilného prehliadača v prehliadači Google Chrome^{(Google Chrome)}

TIP: Bohužiaľ, klávesovú skratku ^(TIP:)CTRL + Shift + M môžete použiť až po povolení vývojárskych nástrojov.

Prejdite^(Navigate) na stránku, ktorú chcete otestovať, prepínajte medzi rôznymi smartfónmi a tabletmi a pozrite sa, ako vyzerá. Keď skončíte, stlačte tlačidlo X (Zavrieť)^{(X (Close))} v pravom hornom rohu vývojárskych nástrojov prehliadača Google Chrome, aby ste sa vrátili do štandardného režimu prehliadania pracovnej plochy.

Zatvorenie emulátora mobilného prehliadača Google Chrome

TIP: Ak ste náročným používateľom prehliadača Google Chrome^{(Google Chrome)} , možno budete chcieť zistiť , ako používať možnosti ovládania médií prehliadača Google Chrome^{(how to use Google Chrome’s media control options)} .

Ako zapnúť a používať emulátor mobilného prehliadača v Mozilla Firefox

V prehliadači Mozilla Firefox^{(Mozilla Firefox)} otvorte stránku, pre ktorú chcete použiť simulátor mobilného prehliadača. Potom buď stlačte CTRL + Shift + M na klávesnici alebo kliknite na tlačidlo hamburger v pravom hornom rohu, čím otvoríte ponuku Firefoxu, a vyberte Web Developer .

Získajte prístup k nástrojom pre vývojárov webu vo ^{(Web Developer)}Firefoxe^(Firefox)

Zobrazí sa ponuka plná nástrojov, ktoré sú užitočné pre vývojárov webu. V zozname vyberte „Responsive Design Mode“ a tento konkrétny režim zobrazenia webovej stránky sa načíta vo Firefoxe^(Firefox) .

Vo Firefoxe^(Firefox) vyberte režim responzívneho dizajnu^{(Responsive Design Mode)}

Firefox umožňuje režim responzívneho dizajnu^{(Responsive Design Mode)} . V hornej časti okna vidíte parametre používané týmto režimom emulácie. Ak nie je vybraté žiadne zariadenie, kliknite alebo klepnite na Responzívne^(Responsive) , aby ste otvorili rozbaľovací zoznam so zariadeniami dostupnými na emuláciu a potom vyberte to, ktoré chcete simulovať.

Môžete simulovať mobilný prehliadač pre mnohé telefóny iPhone, iPad, Kindle Fire ( jediný prehliadač ponúka túto možnosť emulácie Firefox) a zariadenia ^(Firefox)Samsung Galaxy S9 .

Použite emulátor mobilného prehliadača vo Firefoxe^(Firefox)

Po dokončení testovania s emulátorom prehliadača smartfónu stlačte tlačidlo X (Zavrieť režim responzívneho dizajnu)^{(X (Close Responsive Design Mode))} v pravom hornom rohu prehliadača Mozilla Firefox^{(Mozilla Firefox)} .

Zatvorte emulátor mobilného prehliadača vo Firefoxe^(Firefox)

Ste späť v štandardnom režime prehliadania pracovnej plochy.

Ako zapnúť a používať emulátor mobilného prehliadača v Microsoft Edge

Microsoft Edge používa rovnaký vykresľovací modul ako Google Chrome a ponúka rovnaké emulátory prehliadača smartfónov. Ak chcete k nim pristupovať, navštívte webovú lokalitu, ktorú chcete otestovať, a stlačte CTRL + SHIFT + I na klávesnici alebo kliknite na tri vodorovné bodky ( „Nastavenia a ďalšie“^{(“Settings and more”)} ) v pravom hornom rohu prehliadača Microsoft Edge^{(Microsoft Edge)} . V zobrazenej ponuke prejdite na Ďalšie nástroje^{(More tools)} a potom na Nástroje pre vývojárov^{(Developer Tools)} .

Získajte prístup k nástrojom pre vývojárov v ^(Developer)Microsoft Edge

Kliknite na tlačidlo „Prepnúť emuláciu zariadenia“^{(“Toggle device emulation”)} (vyzerá to ako smartfón vedľa tabletu) alebo stlačte CTRL + Shift + M na klávesnici. Tým sa aktivuje panel s nástrojmi emulátora mobilného prehliadača. V predvolenom nastavení používa responzívnu^(Responsive) šablónu pre web, ktorý ste načítali. Kliknite^(Click) naň a vyberte mobilné zariadenie, ktoré chcete emulovať. Vaše možnosti zahŕňajú rovnaké smartfóny a tablety ako Google Chrome .

Prístup k emulátoru mobilného prehliadača v Microsoft Edge

Prehliadnite si stránku, ktorú chcete otestovať, prepínajte medzi rôznymi mobilnými zariadeniami a pozrite sa, ako vyzerá. Keď skončíte, stlačte tlačidlo X (Zavrieť)^{(X (Close))} v pravom hornom rohu Microsoft Edge.

Zatvorte emulátor mobilného prehliadača v Microsoft Edge

Teraz ste späť v štandardnom režime prehliadania pracovnej plochy.

Ako zapnúť a používať emulátor mobilného prehliadača v Opere^(Opera)

V Opere^(Opera) navštívte webovú stránku, ktorú chcete zobraziť, ako keby ste používali mobilné zariadenie. Potom kliknite na ikonu Opera vľavo hore ( „Prispôsobiť a ovládať Opera“^{(“Customize and control Opera”)} ). V ponuke, ktorá sa otvorí, vyberte položku Vývojár^(Developer) a potom Nástroje pre vývojárov^{(Developer tools)} . Ak uprednostňujete klávesnicu, rovnaký výsledok dosiahnete stlačením CTRL+Shift+I

Prístup k nástrojom pre vývojárov v Opere

Nástroje pre vývojárov^{( Developer tools)} sú zobrazené na pravej strane okna prehliadača. Kliknite na tlačidlo „Prepnúť panel s nástrojmi zariadenia“^{(“Toggle device toolbar”)} (vyzerá ako smartfón vedľa tabletu) alebo stlačte CTRL + Shift + M na klávesnici. Panel s nástrojmi zariadenia je zobrazený vľavo. V predvolenom nastavení používa responzívnu^(Responsive) šablónu pre web, ktorý ste načítali. Kliknite^(Click) naň a zo zoznamu možností vyberte mobilné zariadenie, ktoré chcete emulovať. Opera ponúka rovnaké emulátory mobilného prehliadača ako Google Chrome a Microsoft Edge , keďže je založený na rovnakom vykresľovacom jadre ( Chromium ).

Prístup k emulátoru mobilného prehliadača v Opere^(Opera)

Po dokončení testovania stlačte tlačidlo X ( Zavrieť^(Close) ) v pravom hornom rohu, aby ste sa vrátili do štandardného režimu prehliadania pracovnej plochy.

Zatvorte emulátor mobilného prehliadača v Opere^(Opera)

Ste^(Are) spokojní s dostupnými možnosťami emulácie mobilného prehliadača?

Teraz viete, ako emulovať všetky druhy mobilných zariadení vo svojom obľúbenom webovom prehliadači. Môžete si však všimnúť, že väčšina webových prehliadačov ponúka rovnaké možnosti emulácie, ktoré uprednostňujú iPhony a iPady. Ak chcete napodobniť moderný smartfón alebo tablet s Androidom^(Android) , vaše šance sú dosť malé, dokonca aj v prehliadači Google Chrome^{(Google Chrome)} , ktorý vyvinula spoločnosť stojaca za Androidom^(Android) . Ak chcete dosiahnuť najlepšie výsledky, možno budete musieť na túto úlohu použiť dva prehliadače: Chrome a Firefox alebo Firefox a Edge alebo Opera . Pred odchodom nám povedzte, čo si myslíte o dostupných možnostiach.

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera -

Do you need to aсcess a smartphone browser emulator оn your PC to test the mobile vеrsion of a website yоu are interested in? Maybe you are a web developer, or you want to become one, and you need to simulate a mobile browser for the project you are working on. Regardless оf your reasons, here is how to access a mobile browѕer emulаtor in Google Chrome, Mozilla Firеfox, Microsoft Edge, and Opera:

How to turn on and use the mobile browser emulator in Google Chrome

In Google Chrome, navigate to the website that you want to view in the mobile browser emulator. Then, either press the CTRL + SHIFT + I keys on your keyboard or, with the mouse, click the three vertical dots in the top-right corner to open the “Customize and control Google Chrome” menu. Choose More tools, followed by Developer Tools.

Access Developer Tools in Google Chrome

Click or tap on the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the device toolbar where the mobile page is loaded. By default, the device toolbar uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC.

How to enable the mobile browser emulator in Google Chrome

TIP: Unfortunately, you can use the CTRL + Shift + M keyboard shortcut only after enabling the developer tools.

Navigate the site you want to test, switch between the different smartphones and tablets, and see how it looks. When you are done, press the X (Close) button in the top-right corner of Google Chrome’s developer tools to get back to the standard desktop browsing mode.

Closing the mobile browser emulator Google Chrome

TIP: If you are a heavy Google Chrome user, you may also want to learn how to use Google Chrome’s media control options.

How to turn on and use the mobile browser emulator in Mozilla Firefox

In Mozilla Firefox, open the site for which you want to use a mobile browser simulator. Then, either press CTRL + Shift + M on your keyboard or click the burger button on the top-right corner to open Firefox’s menu, and choose Web Developer.

Access the Web Developer tools in Firefox

You see a menu filled with tools that are useful to web developers. In the list, select “Responsive Design Mode,” and this particular mode of viewing a web page is loaded in Firefox.

Choose the Responsive Design Mode in Firefox

Firefox enables the Responsive Design Mode. At the top of the window, you see the parameters used by this emulation mode. If no device is selected, click or tap on Responsive to open a drop-down list with devices available for emulation, and then choose the one that you want to simulate.

You can simulate the mobile browser for many iPhones, the iPad, the Kindle Fire (Firefox is the only browser to offer this emulation option), and Samsung Galaxy S9 devices.

Use the mobile browser emulator in Firefox

When you’re done testing with the smartphone browser emulator, press the X (Close Responsive Design Mode) button on the top-right corner of Mozilla Firefox.

Close the mobile browser emulator in Firefox

You are back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Microsoft Edge

Microsoft Edge uses the same rendering engine as Google Chrome and offers the same smartphone browser emulators. To access them, visit the website that you want to test, and either press the CTRL + SHIFT + I keys on your keyboard or click the three horizontal dots (“Settings and more”) in the top-right corner of Microsoft Edge. In the menu that appears, go to More tools and then to Developer Tools.

Access the Developer tools in Microsoft Edge

Click the “Toggle device emulation” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the mobile browser emulator toolbar. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include the same smartphones and tablets as Google Chrome.

Access the mobile browser emulator in Microsoft Edge

Browse the site you want to test, change between the different mobile devices, and see how it looks. When you are done, press the X (Close) button in Microsoft Edge’s top-right corner.

Close the mobile browser emulator in Microsoft Edge

You are now back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Opera

In Opera, visit the web page that you want to view as if you were using a mobile device. Then click the Opera icon on the top-left (“Customize and control Opera”). In the menu that opens, choose Developer followed by Developer tools. If you prefer the keyboard, press the CTRL+Shift+I keys for the same result.

Access the Developer tools in Opera

The Developer tools are displayed on the right side of the browser window. Click the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. The device toolbar is shown on the left. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate from the list of options. Opera offers the same mobile browser emulators as Google Chrome and Microsoft Edge, as it is based on the same rendering engine (Chromium).

Access the mobile browser emulator in Opera

When you are done testing, press the X (Close) button in the top-right corner to get back to the standard desktop browsing mode.

Close the mobile browser emulator in Opera

Are you happy with the mobile browser emulation options available?

Now you know how to emulate all kinds of mobile devices in your favorite web browser. However, you might notice that most web browsers offer the same emulation options that favor iPhones and iPads. If you want to emulate a modern Android smartphone or tablet, your chances are pretty slim, even in Google Chrome - the browser developed by the company behind Android. If you want the best results, you might need to use two browsers for this task: Chrome and Firefox, or Firefox and Edge or Opera. Before you go, tell us what you think about the available options.

Related posts

• Ako stlmiť kartu v prehliadačoch Chrome, Firefox, Microsoft Edge a Opera

• Ako vytlačiť článok bez reklám vo všetkých hlavných prehliadačoch -

• Ako pripnúť webovú lokalitu na panel úloh alebo do ponuky Štart v systéme Windows 10

• Ako nastaviť Chrome ako predvolený prehliadač v systéme Windows 10 (Firefox a Opera)

• Ako zmeniť predvolený prehliadač v systéme Windows 11 -

• Ako priblížiť a oddialiť vo webovom prehliadači -

• Ako povoliť funkciu Nesledovať v prehliadačoch Chrome, Firefox, Edge a Opera

• Ako používať kolekcie Microsoft Edge -

• Ako prepnúť Google Chrome do tmavého režimu -

• Ako zmeniť predvolený vyhľadávací nástroj Firefox -

• Chrome 64-bit alebo Chrome 32-bit: Stiahnite si požadovanú verziu pre Windows 10 alebo starší

• Ako spustiť Microsoft Edge v systéme Windows 10 (12 spôsobov) -

• Kde sú uložené súbory cookie v systéme Windows 10 pre všetky hlavné prehliadače?

• Ako nastaviť proxy server v prehliadačoch Chrome, Firefox, Edge a Opera

• Ako zmeniť jazyk vo Firefoxe na Windows a Mac

• Ako používať časovú os systému Windows 10 s prehliadačom Google Chrome

• Jednoduché otázky: Čo sú cookies a na čo slúžia?

• Akú verziu Microsoft Edge mám? -

• Ako urobiť z Google môj vyhľadávač v Microsoft Edge -

• Ako zmeniť vyhľadávací nástroj v prehliadači Chrome pre Windows, MacOS, Android a iOS -