Tarvitseeko sinun käyttää älypuhelimen selainemulaattoria tietokoneellasi testataksesi sinua kiinnostavan verkkosivuston mobiiliversiota? Ehkä olet web-kehittäjä tai haluat tulla sellaiseksi, ja sinun on simuloitava mobiiliselaimella olevaa projektia varten. Syistäsi riippumatta^(Regardless) näin voit käyttää mobiiliselainemulaattoria Google Chromessa^{(Google Chrome)} , Mozilla Firefoxissa^{(Mozilla Firefox)} , Microsoft Edgessä^{(Microsoft Edge)} ja Operassa:

Kuinka ottaa käyttöön ja käyttää mobiiliselainemulaattoria Google Chromessa^{(Google Chrome)}

Siirry Google Chromessa^{(Google Chrome)} verkkosivustolle, jota haluat tarkastella mobiiliselainemulaattorissa. Paina sitten joko näppäimistön näppäimiä CTRL + SHIFT + I tai napsauta hiirellä kolmea pystysuoraa pistettä oikeassa yläkulmassa avataksesi "Muokkaa ja hallitse Google Chromea"^{(“Customize and control Google Chrome”)} -valikon. Valitse Lisää työkaluja ja^{(More tools, )} sen jälkeen Kehittäjän työkalut^{(Developer Tools)} .

Käytä kehittäjän työkaluja ^{(Access Developer Tools)}Google^{(Google Chrome)} Chromessa

Napsauta tai napauta "Toggle device toolbar" -painiketta (se näyttää älypuhelimelta tabletin vieressä) tai paina näppäimistön CTRL CTRL + Shift + MTämä aktivoi laitteen työkalupalkin, johon mobiilisivu ladataan. Oletuksena laitteen työkalurivi käyttää Responsiivista^(Responsive) mallia lataamasi sivustolle. Napsauta^(Click) sitä ja valitse mobiililaite, jota haluat emuloida. Vaihtoehtojasi ovat monet iPhonet, iPadit, Surface Duo , kaksi Samsung Galaxy -laitetta ja Moto G4 -mobiiliselain^{(Moto G4 mobile)} simulaattori PC:lle.

Kuinka ottaa mobiiliselainemulaattori käyttöön Google Chromessa^{(Google Chrome)}

VINKKI:^(TIP:) Valitettavasti voit käyttää CTRL + Shift + M -pikanäppäintä vasta kun olet ottanut kehittäjätyökalut käyttöön.

Navigoi^(Navigate) sivustolla, jota haluat testata, vaihda eri älypuhelimien ja tablettien välillä ja katso miltä se näyttää. Kun olet valmis, palaa normaaliin työpöytäselaustilaan painamalla Google Chromen kehittäjätyökalujen oikeassa yläkulmassa olevaa X (Sulje) -painiketta.^{(X (Close))}

Suljetaan mobiiliselainemulaattori Google Chrome

VINKKI:^(TIP:) Jos olet ahkera Google Chromen^{(Google Chrome)} käyttäjä, saatat haluta myös oppia käyttämään Google Chromen mediahallintavaihtoehtoja^{(how to use Google Chrome’s media control options)} .

Mobiiliselainemulaattorin käyttöönotto ja käyttö Mozilla Firefoxissa^{(Mozilla Firefox)}

Avaa Mozilla Firefoxissa^{(Mozilla Firefox)} sivusto, jossa haluat käyttää mobiiliselainsimulaattoria. Paina sitten näppäimistön näppäinyhdistelmää CTRL + Shift + M tai napsauta oikeassa yläkulmassa olevaa Burger-painiketta avataksesi Firefoxin valikon ja valitse Web Developer .

Käytä Web Developer -työkaluja Firefoxissa^(Firefox)

Näet valikon, joka on täynnä työkaluja, jotka ovat hyödyllisiä verkkokehittäjille. Valitse luettelosta "Responsive Design Mode", ja tämä Web-sivun katselutila ladataan Firefoxiin^(Firefox) .

Valitse Responsive Design ^{(Responsive Design Mode)}Mode^(Firefox) Firefoxissa

Firefox ottaa käyttöön reagoivan suunnittelutilan^{(Responsive Design Mode)} . Ikkunan yläosassa näet tämän emulointitilan käyttämät parametrit. Jos laitetta ei ole valittu, napsauta tai napauta Responsiivinen^(Responsive) avataksesi pudotusluettelon emuloitavissa olevista laitteista ja valitse sitten se, jota haluat simuloida.

Voit simuloida mobiiliselainta monille iPhoneille, iPadille, Kindle Firelle^{(Kindle Fire)} ( Firefox on ainoa selain, joka tarjoaa tämän emulointivaihtoehdon) ja Samsung Galaxy S9 -laitteille.

Käytä mobiiliselainemulaattoria Firefoxissa^(Firefox)

Kun olet valmis testaamaan älypuhelimen selainemulaattoria, paina X (Sulje Responsive Design Mode) -painiketta ^{(X (Close Responsive Design Mode))}Mozilla Firefoxin^{(Mozilla Firefox)} oikeassa yläkulmassa .

Sulje mobiiliselainemulaattori Firefoxissa^(Firefox)

Olet palannut tavalliseen työpöydän selaustilaan.

Kuinka ottaa käyttöön ja käyttää mobiiliselainemulaattoria Microsoft Edgessä^{(Microsoft Edge)}

Microsoft Edge käyttää samaa renderöintimoottoria kuin Google Chrome ja tarjoaa samat älypuhelimen selainemulaattorit. Pääset niihin vierailemalla verkkosivustolla, jota haluat testata, ja painamalla joko näppäimiä CTRL + SHIFT + I tai napsauttamalla kolmea vaakasuuntaista pistettä ( "Asetukset ja muuta" ) ^{(“Settings and more”)}Microsoft Edgen^{(Microsoft Edge)} oikeassa yläkulmassa . Valitse näkyviin tulevasta valikosta Lisää työkaluja^{(More tools)} ja sitten Kehittäjätyökalut^{(Developer Tools)} .

Käytä Microsoft^{(Microsoft Edge)} Edgen kehittäjätyökaluja^(Developer)

Napsauta "Vaihda laitteen emulointi"^{(“Toggle device emulation”)} -painiketta (se näyttää älypuhelimelta tabletin vieressä) tai paina näppäimistön CTRL CTRL + Shift + MTämä aktivoi mobiiliselaimen emulaattorin työkalupalkin. Oletuksena se käyttää Responsiivista^(Responsive) mallia lataamallesi sivustolle. Napsauta^(Click) sitä ja valitse mobiililaite, jota haluat emuloida. Vaihtoehtoihisi kuuluvat samat älypuhelimet ja tabletit kuin Google Chrome .

Käytä mobiiliselainemulaattoria Microsoft Edgessä^{(Microsoft Edge)}

Selaa sivustoa, jota haluat testata, vaihda eri mobiililaitteiden välillä ja katso, miltä se näyttää. Kun olet valmis, paina X (Sulje)^{(X (Close))} -painiketta Microsoft Edgen oikeassa yläkulmassa.

Sulje mobiiliselainemulaattori Microsoft Edgessä^{(Microsoft Edge)}

Olet nyt palannut tavalliseen työpöydän selaustilaan.

Kuinka ottaa käyttöön ja käyttää mobiiliselainemulaattoria Operassa^(Opera)

Siirry Operassa^(Opera) verkkosivulle, jota haluat tarkastella kuin käyttäisit mobiililaitetta. Napsauta sitten vasemmassa yläkulmassa olevaa Opera -kuvaketta ( ^(Opera)"Muokkaa ja hallitse Operaa"^{(“Customize and control Opera”)} ). Valitse avautuvasta valikosta Kehittäjä^(Developer) ja sitten Kehittäjätyökalut^{(Developer tools)} . Jos haluat käyttää näppäimistöä, paina CTRL+Shift+I saadaksesi saman tuloksen.

Käytä Operan kehittäjätyökaluja

Kehittäjätyökalut näkyvät^{( Developer tools)} selainikkunan oikealla puolella. Napsauta "Toggle device toolbar" -painiketta (se näyttää älypuhelimelta tabletin vieressä) tai paina näppäimistön CTRL CTRL + Shift + MLaitteen työkalupalkki näkyy vasemmalla. Oletuksena se käyttää Responsiivista^(Responsive) mallia lataamallesi sivustolle. Napsauta^(Click) sitä ja valitse vaihtoehtoluettelosta mobiililaite, jota haluat emuloida. Opera tarjoaa samat mobiiliselainemulaattorit kuin Google Chrome ja Microsoft Edge , koska se perustuu samaan renderöintimoottoriin ( Chromium ).

Käytä mobiiliselaimen emulaattoria Operassa^(Opera)

Kun olet valmis, paina X ( Sulje^(Close) ) -painiketta oikeassa yläkulmassa palataksesi normaaliin työpöytäselaustilaan.

Sulje mobiiliselainemulaattori Operassa^(Opera)

Oletko^(Are) tyytyväinen mobiiliselaimen emulointivaihtoehtoihin?

Nyt tiedät kuinka emuloida kaikenlaisia ​​mobiililaitteita suosikkiselaimellasi. Saatat kuitenkin huomata, että useimmat verkkoselaimet tarjoavat samat emulointivaihtoehdot, jotka suosivat iPhonea ja iPadia. Jos haluat jäljitellä nykyaikaista Android - älypuhelinta tai -tablettia, mahdollisuutesi ovat melko pienet, jopa Google Chromessa – ^{(Google Chrome)}Androidin^(Android) takana olevan yrityksen kehittämässä selaimessa . Jos haluat parhaan tuloksen, sinun on ehkä käytettävä kahta selainta tähän tehtävään: Chrome ja Firefox tai Firefox ja Edge tai Opera . Ennen kuin lähdet, kerro meille mielipiteesi käytettävissä olevista vaihtoehdoista.

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

Do you need to access a smartphone browser emulator on your PC to test thе mobile verѕion of a website you are interested іn? Maybe you arе a web developer, or you want to become one, and you need to simulate a mobіle browser for the projeсt you are working on. Regardlesѕ of your reasons, here is how to access a mobile browser emulator in Google Chromе, 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

• Välilehden mykistäminen Chromessa, Firefoxissa, Microsoft Edgessä ja Operassa

• Kuinka tulostaa artikkeli ilman mainoksia kaikissa yleisimmissä selaimissa -

• Verkkosivuston kiinnittäminen tehtäväpalkkiin tai Käynnistä-valikkoon Windows 10:ssä

• Chromen tekeminen oletusselaimeksi Windows 10:ssä (Firefox ja Opera)

• Oletusselaimen vaihtaminen Windows 11:ssä -

• Kuinka ottaa Do Not Track käyttöön Chromessa, Firefoxissa, Edgessä ja Operassa

• Siirry incognito-tilaan pikanäppäimellä Chromessa, Edgessä, Firefoxissa ja Operassa

• Firefoxin oletushakukoneen vaihtaminen -

• Kuinka tuoda salasanoja LastPassiin Chromesta, Firefoxista, Operasta ja Microsoft Edgestä

• Mikä selain pidentää akun kestoa Windows 10:ssä?

• Top 10 Microsoft Edge -lisäosaa vuonna 2021 -

• Evästeiden poistaminen Androidista (Chrome, Firefox, Opera, Samsung Internet)

• Adobe Flash Playerin eston poistaminen Windows 10:n Microsoft Edgessä -

• Microsoft Edge -kokoelman käyttäminen -

• 5 ongelmaa, jotka tekevät Microsoft Edgestä muita huonomman selaimen

• Tumman tilan kytkeminen päälle ja pois päältä Microsoft Edgessä -

• LastPass-salasanojen vieminen CSV-tiedostoon

• Kuinka asettaa sivuun välilehtiä Microsoft Edgessä ja käyttää niitä myöhemmin

• Kuinka lähentää ja loitontaa verkkoselaimessa -

• Chrome 64-bittinen tai Chrome 32-bittinen: Lataa haluamasi versio Windows 10:lle tai vanhemmalle