Você precisa acessar um emulador de navegador de smartphone em seu PC para testar a versão móvel de um site de seu interesse? Talvez você seja um desenvolvedor web ou queira se tornar um e precise simular um navegador móvel para o projeto em que está trabalhando. Independentemente^(Regardless) de seus motivos, veja como acessar um emulador de navegador móvel no Google Chrome , Mozilla Firefox , Microsoft Edge e Opera:

Como ativar e usar o emulador de navegador móvel no Google Chrome

No Google Chrome , navegue até o site que deseja visualizar no emulador de navegador móvel. Em seguida, pressione as CTRL + SHIFT + I no teclado ou, com o mouse, clique nos três pontos verticais no canto superior direito para abrir o menu “Personalizar e controlar o Google Chrome” . ^{(“Customize and control Google Chrome”)}Escolha Mais ferramentas,^{(More tools, )} seguido por Ferramentas do desenvolvedor^{(Developer Tools)} .

Acesse as Ferramentas do Desenvolvedor^{(Access Developer Tools)} no Google Chrome

Clique ou toque no botão “Alternar barra de ferramentas do dispositivo”^{(“Toggle device toolbar”)} (parece um smartphone ao lado de um tablet) ou pressione CTRL + Shift + M no teclado. Isso ativa a barra de ferramentas do dispositivo onde a página móvel é carregada. Por padrão, a barra de ferramentas do dispositivo usa um modelo responsivo^(Responsive) para o site que você carregou. Clique^(Click) nele e escolha o dispositivo móvel que você deseja emular. Suas opções incluem muitos iPhones, iPads, Surface Duo , dois dispositivos Samsung Galaxy e um simulador de navegador móvel Moto G4 para PC.^{(Moto G4 mobile)}

Como ativar o emulador de navegador móvel no Google Chrome

DICA:^(TIP:) Infelizmente, você pode usar o atalho de teclado CTRL + Shift + M

Navegue^(Navigate) no site que deseja testar, alterne entre os diferentes smartphones e tablets e veja como fica. Quando terminar, pressione o botão X (Fechar)^{(X (Close))} no canto superior direito das ferramentas de desenvolvedor do Google Chrome para voltar ao modo de navegação padrão da área de trabalho.

Fechando o emulador de navegador móvel Google Chrome

DICA:^(TIP:) se você for um usuário frequente do Google Chrome , também poderá aprender a usar as opções de controle de mídia do Google Chrome^{(how to use Google Chrome’s media control options)} .

Como ativar e usar o emulador de navegador móvel no Mozilla Firefox

No Mozilla Firefox , abra o site para o qual você deseja usar um simulador de navegador móvel. Em seguida, pressione CTRL + Shift + M no teclado ou clique no botão de hambúrguer no canto superior direito para abrir o menu do Firefox e escolha Web Developer .

Acesse as ferramentas do desenvolvedor da Web no ^{(Web Developer)}Firefox

Você vê um menu cheio de ferramentas que são úteis para desenvolvedores da web. Na lista, selecione “Modo de design responsivo”^{(“Responsive Design Mode,”)} e esse modo específico de visualização de uma página da Web é carregado no Firefox .

Escolha o modo de design responsivo^{(Responsive Design Mode)} no Firefox

O Firefox ativa o modo de design responsivo^{(Responsive Design Mode)} . Na parte superior da janela, você vê os parâmetros usados ​​por este modo de emulação. Se nenhum dispositivo estiver selecionado, clique ou toque em Responsivo^(Responsive) para abrir uma lista suspensa com dispositivos disponíveis para emulação e escolha aquele que você deseja simular.

Você pode simular o navegador móvel para muitos iPhones, iPad, Kindle Fire ( o Firefox é o único navegador que oferece essa opção de emulação) e dispositivos Samsung Galaxy S9 .

Use o emulador de navegador móvel no Firefox

Quando terminar de testar com o emulador de navegador do smartphone, pressione o botão X (Fechar modo de design responsivo)^{(X (Close Responsive Design Mode))} no canto superior direito do Mozilla Firefox .

Feche o emulador de navegador móvel no Firefox

Você está de volta ao modo de navegação padrão da área de trabalho.

Como ativar e usar o emulador de navegador móvel no Microsoft Edge

O Microsoft Edge^{(Microsoft Edge)} usa o mesmo mecanismo de renderização do Google Chrome e oferece os mesmos emuladores de navegador de smartphone. Para acessá-los, visite o site que você deseja testar e pressione as CTRL + SHIFT + I no teclado ou clique nos três pontos horizontais ( “Configurações e mais”^{(“Settings and more”)} ) no canto superior direito do Microsoft Edge . No menu exibido, vá para Mais ferramentas^{(More tools)} e depois para Ferramentas do desenvolvedor^{(Developer Tools)} .

Acesse as ferramentas do desenvolvedor no ^(Developer)Microsoft Edge

Clique no botão “Alternar emulação de dispositivo”^{(“Toggle device emulation”)} (parece um smartphone ao lado de um tablet) ou pressione CTRL + Shift + M no teclado. Isso ativa a barra de ferramentas do emulador do navegador móvel. Por padrão, ele usa um modelo responsivo^(Responsive) para o site que você carregou. Clique^(Click) nele e escolha o dispositivo móvel que você deseja emular. Suas opções incluem os mesmos smartphones e tablets do Google Chrome .

Acesse o emulador de navegador móvel no Microsoft Edge

Navegue pelo site que deseja testar, alterne entre os diferentes dispositivos móveis e veja como fica. Quando terminar, pressione o botão X (Fechar)^{(X (Close))} no canto superior direito do Microsoft Edge.

Feche o emulador de navegador móvel no Microsoft Edge

Agora você está de volta ao modo de navegação padrão da área de trabalho.

Como ativar e usar o emulador de navegador móvel no Opera

No Opera , visite a página da Web que você deseja visualizar como se estivesse usando um dispositivo móvel. Em seguida, clique no ícone do Opera no canto superior esquerdo ( ^(Opera)“Personalizar e controlar o Opera”^{(“Customize and control Opera”)} ). No menu que se abre, escolha Desenvolvedor^(Developer) seguido de Ferramentas^{(Developer tools)} do desenvolvedor . Se preferir o teclado, pressione as CTRL+Shift+I para obter o mesmo resultado.

Acesse as ferramentas do desenvolvedor no Opera

As ferramentas do desenvolvedor^{( Developer tools)} são exibidas no lado direito da janela do navegador. Clique no botão “Alternar barra de ferramentas do dispositivo”^{(“Toggle device toolbar”)} (parece um smartphone ao lado de um tablet) ou pressione CTRL + Shift + M no teclado. A barra de ferramentas do dispositivo é mostrada à esquerda. Por padrão, ele usa um modelo responsivo^(Responsive) para o site que você carregou. Clique^(Click) nele e escolha o dispositivo móvel que você deseja emular na lista de opções. O Opera oferece os mesmos emuladores de navegador móvel que o Google Chrome e o Microsoft Edge^{(Microsoft Edge)} , pois é baseado no mesmo mecanismo de renderização ( Chromium ).

Acesse o emulador de navegador móvel no Opera

Quando terminar de testar, pressione o botão X ( Fechar^(Close) ) no canto superior direito para voltar ao modo de navegação padrão da área de trabalho.

Feche o emulador de navegador móvel no Opera

Você^(Are) está satisfeito com as opções de emulação de navegador móvel disponíveis?

Agora você sabe como emular todos os tipos de dispositivos móveis em seu navegador favorito. No entanto, você pode notar que a maioria dos navegadores da Web oferece as mesmas opções de emulação que favorecem iPhones e iPads. Se você deseja emular um smartphone ou tablet Android moderno, suas chances são bem pequenas, mesmo no ^(Android)Google Chrome - o navegador desenvolvido pela empresa por trás do Android . Se você deseja os melhores resultados, talvez seja necessário usar dois navegadores para esta tarefa: Chrome e Firefox , ou Firefox e Edge ou Opera . Antes de ir, diga-nos o que pensa sobre as opções disponíveis.

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

Do you need to access a smartphоne browser emulаtor on your PC to teѕt the mobilе νеrsion of а website you are interested in? Maybe you are a web developer, or you want to become one, and you need to simulate a mobіle browѕer for the project you are working on. Regardless of your reasons, herе is how to access a mobile browser emulator in Google Chrome, Mozilla Firefox, Microsoft Edge, and Operа:

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

• Como silenciar uma aba em Chrome, Firefox, Microsoft Edge e Opera

• Como imprimir um artigo sem anúncios em todos os principais navegadores

• Como fixar um site para a barra de tarefas ou a Start Menu em Windows 10

• Como fazer Chrome o default browser em Windows 10 (Firefox & Opera)

• Como mudar o default browser em Windows 11

• Como desativar as notificações Chrome: Tudo que você precisa saber

• Qual versão do Microsoft Edge eu tenho?

• Como desinstalar Microsoft Edge de Windows

• Sobre InPrivate and Incognito. Qual é a navegação privada? Which browser é o melhor?

• Como habilitar o Java em todos os principais navegadores da web

• Como limpar cookies no Android (Chrome, Firefox, Opera, Samsung Internet)

• 7 maneiras pelas quais os navegadores devem melhorar a navegação privada (Incognito, InPrivate, etc)

• 5 problemas que tornam o Microsoft Edge um navegador da Web pior do que outros

• Chrome de 64 bits ou Chrome de 32 bits: baixe a versão desejada, para Windows 10 ou anterior

• Como faço para tornar o texto maior em Chrome, Edge, Firefox e Opera?

• Exporte senhas do Chrome, Firefox, Opera, Microsoft Edge e Internet Explorer

• Como desbloquear Adobe Flash Player em Google Chrome

• Make InPrivate or Incognito shortcuts para Firefox, Chrome, Edge, Opera, ou Internet Explorer

• Como alterar o search engine em Chrome para Windows, Macos, Android e iOS

• Como Adobe Flash Player desbloqueio em Microsoft Edge de Windows 10