Trebate li pristupiti emulatoru preglednika pametnog telefona na svom računalu kako biste testirali mobilnu verziju web stranice koja vas zanima? Možda ste web developer ili želite to postati, a trebate simulirati mobilni preglednik za projekt na kojem radite. Bez obzira^(Regardless) na vaše razloge, evo kako pristupiti emulatoru mobilnog preglednika u Google Chromeu^{(Google Chrome)} , Mozilla Firefoxu^{(Mozilla Firefox)} , Microsoft Edgeu^{(Microsoft Edge)} i Operi:

Kako uključiti i koristiti emulator mobilnog preglednika u Google Chromeu^{(Google Chrome)}

U Google Chromeu^{(Google Chrome)} idite na web-mjesto koje želite vidjeti u emulatoru mobilnog preglednika. Zatim pritisnite tipke CTRL + SHIFT + I na tipkovnici ili mišem kliknite tri okomite točke u gornjem desnom kutu da biste otvorili izbornik "Prilagodi i kontroliraj Google Chrome"^{(“Customize and control Google Chrome”)} . Odaberite Više alata,^{(More tools, )} a zatim Alati za razvojne programere^{(Developer Tools)} .

Pristupite alatima za razvojne programere^{(Access Developer Tools)} u Google Chromeu^{(Google Chrome)}

Kliknite ili dodirnite gumb "Prebaci alatnu traku uređaja"^{(“Toggle device toolbar”)} (izgleda kao pametni telefon pored tableta) ili pritisnite CTRL + Shift + M na tipkovnici. Time se aktivira alatna traka uređaja na kojoj se učitava mobilna stranica. Prema zadanim postavkama, alatna traka uređaja koristi responzivni^(Responsive) predložak za web-mjesto koje ste učitali. Kliknite^(Click) na njega i odaberite mobilni uređaj koji želite oponašati. Vaše opcije uključuju mnoge iPhone uređaje, iPade, Surface Duo , dva Samsung Galaxy uređaja i simulator mobilnog preglednika Moto G4^{(Moto G4 mobile)} za PC.

Kako omogućiti emulator mobilnog preglednika u Google Chromeu^{(Google Chrome)}

SAVJET:^(TIP:) Nažalost, tipkovnički prečac CTRL + Shift + M možete koristiti tek nakon što omogućite alate za razvojne programere.

Krećite^(Navigate) se web-mjestom koju želite testirati, prebacite se između različitih pametnih telefona i tableta i pogledajte kako izgleda. Kada završite, pritisnite gumb X (Zatvori)^{(X (Close))} u gornjem desnom kutu alata za razvojne programere Google Chromea da biste se vratili na standardni način pregledavanja radne površine.

Zatvaranje emulatora mobilnog preglednika Google Chrome

SAVJET:^(TIP:) Ako ste veliki korisnik preglednika Google Chrome^{(Google Chrome)} , možda biste također željeli naučiti kako koristiti opcije kontrole medija u pregledniku Google Chrome^{(how to use Google Chrome’s media control options)} .

Kako uključiti i koristiti emulator mobilnog preglednika u Mozilla Firefoxu^{(Mozilla Firefox)}

U Mozilla Firefoxu^{(Mozilla Firefox)} otvorite stranicu za koju želite koristiti simulator mobilnog preglednika. Zatim pritisnite CTRL + Shift + M na tipkovnici ili kliknite gumb za hamburger u gornjem desnom kutu da otvorite Firefoxov izbornik i odaberite Web Developer .

Pristupite alatima Web Developer u ^{(Web Developer)}Firefoxu^(Firefox)

Vidjet ćete izbornik ispunjen alatima koji su korisni web programerima. Na popisu odaberite "Responsive Design Mode" i ovaj način pregleda web stranice učitava se u Firefoxu^(Firefox) .

Odaberite način responzivnog dizajna^{(Responsive Design Mode)} u Firefoxu^(Firefox)

Firefox omogućuje Responsive Design Mode . Na vrhu prozora vidite parametre koje koristi ovaj način emulacije. Ako nijedan uređaj nije odabran, kliknite ili dodirnite Responsive da otvorite padajući popis s uređajima dostupnim za emulaciju, a zatim odaberite onaj koji želite simulirati.

Možete simulirati mobilni preglednik za mnoge iPhone uređaje, iPad, Kindle Fire ( Firefox je jedini preglednik koji nudi ovu opciju emulacije) i Samsung Galaxy S9 uređaje.

Koristite emulator mobilnog preglednika u Firefoxu^(Firefox)

Kada završite s testiranjem s emulatorom preglednika pametnog telefona, pritisnite gumb X (Zatvori responzivni način dizajna) u gornjem desnom kutu ^{(X (Close Responsive Design Mode))}Mozilla Firefoxa^{(Mozilla Firefox)} .

Zatvorite emulator mobilnog preglednika u Firefoxu^(Firefox)

Vratili ste se na standardni način pregledavanja radne površine.

Kako uključiti i koristiti emulator mobilnog preglednika u programu Microsoft Edge

Microsoft Edge koristi isti mehanizam za renderiranje kao Google Chrome i nudi iste emulatore preglednika pametnog telefona. Da biste im pristupili, posjetite web-mjesto koje želite testirati i pritisnite tipke CTRL + SHIFT + I na tipkovnici ili kliknite tri vodoravne točke ( "Postavke i više"^{(“Settings and more”)} ) u gornjem desnom kutu programa Microsoft Edge . U izborniku koji se pojavi idite na Više alata^{(More tools)} , a zatim na Alati za razvojne programere^{(Developer Tools)} .

Pristupite alatima za razvojne programere^(Developer) u programu Microsoft Edge

Kliknite gumb "Prebaci emulaciju uređaja"^{(“Toggle device emulation”)} (izgleda kao pametni telefon pored tableta) ili pritisnite CTRL + Shift + M na tipkovnici. Time se aktivira alatna traka emulatora mobilnog preglednika. Prema zadanim postavkama, koristi responzivni^(Responsive) predložak za web-mjesto koje ste učitali. Kliknite^(Click) na njega i odaberite mobilni uređaj koji želite oponašati. Vaše opcije uključuju iste pametne telefone i tablete kao i Google Chrome .

Pristupite emulatoru mobilnog preglednika u programu Microsoft Edge

Pregledajte web-mjesto koje želite testirati, mijenjajte različite mobilne uređaje i pogledajte kako izgleda. Kada završite, pritisnite gumb X (Zatvori)^{(X (Close))} u gornjem desnom kutu Microsoft Edgea.

Zatvorite emulator mobilnog preglednika u programu Microsoft Edge

Sada ste se vratili na standardni način pregledavanja radne površine.

Kako uključiti i koristiti emulator mobilnog preglednika u Operi^(Opera)

U Operi^(Opera) posjetite web stranicu koju želite vidjeti kao da koristite mobilni uređaj. Zatim kliknite ikonu Opera u gornjem lijevom kutu ( "Prilagodi i kontroliraj Opera"^{(“Customize and control Opera”)} ). U izborniku koji se otvori odaberite Programer^(Developer) , a zatim Alati za razvojne programere^{(Developer tools)} . Ako više volite tipkovnicu, pritisnite tipke CTRL+Shift+I za isti rezultat.

Pristupite alatima za razvojne programere u Operi

Alati za razvojne programere^{( Developer tools)} prikazani su na desnoj strani prozora preglednika. Kliknite gumb "Prebaci alatnu traku uređaja"^{(“Toggle device toolbar”)} (izgleda kao pametni telefon pored tableta) ili pritisnite CTRL + Shift + M na tipkovnici. Alatna traka uređaja prikazana je na lijevoj strani. Prema zadanim postavkama, koristi responzivni^(Responsive) predložak za web-mjesto koje ste učitali. Kliknite^(Click) na njega i s popisa opcija odaberite mobilni uređaj koji želite oponašati. Opera nudi iste emulatore mobilnog preglednika kao Google Chrome i Microsoft Edge , budući da se temelji na istom stroju za renderiranje ( Chromium ).

Pristupite emulatoru mobilnog preglednika u Operi^(Opera)

Kada završite s testiranjem, pritisnite gumb X ( Zatvori^(Close) ) u gornjem desnom kutu da biste se vratili na standardni način pregledavanja radne površine.

Zatvorite emulator mobilnog preglednika u Operi^(Opera)

Jeste^(Are) li zadovoljni dostupnim opcijama emulacije mobilnog preglednika?

Sada znate kako oponašati sve vrste mobilnih uređaja u svom omiljenom web pregledniku. Međutim, možda ćete primijetiti da većina web-preglednika nudi iste opcije emulacije koje favoriziraju iPhone i iPad. Ako želite oponašati moderni Android pametni telefon ili tablet, šanse su vam prilično male, čak i u Google Chromeu^{(Google Chrome)} - pregledniku koji je razvila tvrtka koja stoji iza Androida^(Android) . Ako želite najbolje rezultate, možda ćete morati koristiti dva preglednika za ovaj zadatak: Chrome i Firefox , ili Firefox i Edge ili Opera . Prije nego krenete, recite nam što mislite o dostupnim opcijama.

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

Do you need to access a smartphone brоwser emulator on your PC to test the mobile version of a website you are interested in? Maybe уou are a web developer, or you wаnt to become one, and you need to simulate a mobile browser for the project you are workіng on. Regardless of yoυr reasons, here iѕ how to access a mobile browser emulator in Google Chrome, Mozilla Firefox, 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

• Kako isključiti karticu u Chromeu, Firefoxu, Microsoft Edgeu i Operi

• Kako ispisati članak bez oglasa u svim glavnim preglednicima -

• Kako prikvačiti web stranicu na programsku traku ili izbornik Start u sustavu Windows 10

• Kako postaviti Chrome kao zadani preglednik u sustavu Windows 10 (Firefox i Opera)

• Kako promijeniti zadani preglednik u sustavu Windows 11 -

• Kako promijeniti jezik u Firefoxu na Windowsima i Macu

• Kako omogućiti Do Not Track u Chromeu, Firefoxu, Edgeu i Operi

• Kako dobiti, konfigurirati i ukloniti proširenja za Microsoft Edge -

• Jednostavna pitanja: Što su kolačići i čemu služe?

• Kako raditi anonimno u Chromeu, Firefoxu, Edgeu i Operi

• O InPrivate i anonimnom načinu. Što je privatno pregledavanje? Koji je preglednik najbolji?

• Napravite prečace InPrivate ili Incognito za Firefox, Chrome, Edge, Opera ili Internet Explorer

• Kako pokrenuti Microsoft Edge u sustavu Windows 10 (12 načina) -

• Kako blokirati kolačiće treće strane u Chromeu, Firefoxu, Edgeu i Operi

• Kako isključiti Chrome obavijesti: Sve što trebate znati -

• Chrome 64-bit ili Chrome 32-bit: preuzmite verziju koju želite, za Windows 10 ili stariji

• Gdje su kolačići pohranjeni u sustavu Windows 10 za sve glavne preglednike?

• Koji preglednik će produžiti trajanje baterije u sustavu Windows 10?

• Kako ostaviti kartice u Microsoft Edgeu i koristiti ih kasnije

• Stavite Chrome i druge preglednike na cijeli zaslon (Edge, Firefox i Opera)