Tutorial

Como emular um dispositivo móvel em um navegador de desktop (Chrome, Firefox, Opera, Edge e Internet Explorer)

Existem sites que oferecem mais opções e recursos quando visitados em dispositivos móveis. Quando isso acontece, e você usa um navegador de desktop, fica frustrado por causa da experiência limitada do usuário. Outras vezes, talvez você queira testar e ver como um site é exibido em um determinado dispositivo móvel, como o iPhone, o iPad ou um smartphone Pixel 2. Veja como visualizar (e testar) um site para dispositivos móveis em um PC de mesa:

NOTA: Este guia abrange o Google Chrome, o Mozilla Firefox, o Opera, o Microsoft Edge e o Internet Explorer no Windows. Vá para a seção do navegador que interessa a você e encontre as etapas que você precisa seguir.

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

No Google Chrome, carregue o website para celular que você deseja visualizar. Em seguida, clique ou toque nos três pontos verticais no canto superior direito. Eles são o botão para "Personalizar e controlar o Google Chrome". No menu aberto, escolha Mais ferramentas e, em seguida, "Ferramentas do desenvolvedor". As ferramentas do desenvolvedor são abertas. Para obter o mesmo resultado, você também pode pressionar as teclas CTRL + Shift + I no teclado.

Clique ou toque no botão "Alternar dispositivo da barra de ferramentas" (é um botão pequeno que parece um smartphone e um tablet perto um do outro) 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 para a página que você carregou. Clique nele e escolha o dispositivo móvel que você deseja emular: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (da versão 5 para iPhone X), iPad e iPad Pro. A página móvel é recarregada como se você estivesse usando o smartphone ou tablet escolhido na lista. Não sabe que você está usando um computador desktop.

Quando terminar, pressione o botão X (Fechar) no canto superior direito das ferramentas do desenvolvedor do Google Chrome para voltar ao modo de navegação padrão da área de trabalho.

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

No Mozilla Firefox, abra a página móvel que você deseja acessar como se estivesse usando um dispositivo móvel. Em seguida, clique ou toque no botão de hambúrguer no canto superior direito. É chamado de "menu aberto".

No menu aberto, escolha Desenvolvedor da Web .

Você vê muitas opções úteis para desenvolvedores. O que lhe interessa é o "Modo de Design Responsivo". Clique ou toque nesta opção. Esse modo específico de visualizar uma página da Web agora é carregado no Firefox. O mesmo resultado pode ser obtido pressionando CTRL + Shift + M no seu teclado.

O modo de design responsivo está ativado. No centro da tela, você vê os parâmetros usados ​​por este modo. Se nenhum dispositivo estiver selecionado, clique ou toque na lista suspensa com dispositivos disponíveis para emulação e escolha o que você deseja simular: Samsung Galaxy S9, iPad, iPhone (da versão 6 até o iPhone X), Kindle Fire HDX, e assim por diante. A página móvel é recarregada como se estivesse carregada no dispositivo móvel que você selecionou para emulação.

Quando terminar, pressione o botão X (modo de design responsivo próximo) para retornar ao modo de navegação padrão da área de trabalho.

Como ativar o emulador de navegador móvel no Opera

No Opera, carregue a página móvel que você deseja visualizar como se estivesse usando um dispositivo móvel. Em seguida, clique no ícone do Opera no canto superior esquerdo. É o botão "Personalizar e controlar o Opera" . No menu aberto, escolha Desenvolvedor seguido por Ferramentas do desenvolvedor . As ferramentas do desenvolvedor são exibidas no lado direito da janela do navegador. O mesmo resultado pode ser obtido pressionando as teclas CTRL + Shift + I no seu teclado.

Em seguida, clique ou toque no botão "Alternar dispositivo da barra de ferramentas" (é um pequeno botão que parece um smartphone e um tablet perto um do outro) ou pressione CTRL + Shift + M no teclado. Isso ativa a barra de ferramentas do dispositivo onde sua página da web é carregada. Clique nele e escolha o dispositivo móvel que você deseja emular: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (da versão 5 para iPhone X), iPad e iPad Pro. A página móvel é recarregada dentro do Opera, usando as características do smartphone ou tablet que você escolheu na lista.

Quando terminar, pressione o botão X (Fechar) no canto superior direito das ferramentas de desenvolvedor do Opera para voltar à navegação na área de trabalho.

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

No Microsoft Edge, carregue o site que você deseja exibir como se estivesse usando um dispositivo móvel. Em seguida, clique ou toque no botão "Configurações e mais" encontrado no canto superior direito da janela do navegador. Seu ícone parece com três pontos. Se você estiver usando a Atualização do Windows 10 de outubro de 2018, vá para "Mais ferramentas" e depois para "Ferramentas do desenvolvedor". Se você estiver usando o Windows 10 de abril de 2018 Atualizar ou mais, escolha F12 Developer Tools . As Ferramentas do desenvolvedor são abertas na parte inferior da janela do navegador. Você pode obter o mesmo resultado pressionando a tecla F12 no teclado, não importa a idade ou a novidade do seu Windows 10.

Você vê várias guias nas Ferramentas do desenvolvedor . Se você vir Emulação, clique ou toque nela. Se você não fizer isso, clique ou toque na seta para baixo e, no menu aberto, escolha Emulação .

Em seguida, clique ou toque na lista suspensa Dispositivo . Você pode optar por emular os seguintes dispositivos: Lumia 650, Lumia 950, Lumia 950 XL, Surface Book, Surface Pro 4, iPad, iPad Mini, Nexus 5, Nexus 5X e Nexus 6P.

Quando terminar, pressione o botão X (Fechar) no canto superior direito das ferramentas do desenvolvedor do Microsoft Edge para voltar à navegação na área de trabalho.

Como ativar o emulador de navegador móvel no Internet Explorer

No Internet Explorer, para a página móvel que você deseja visualizar como se estivesse usando um dispositivo móvel. Clique no botão Ferramentas no canto superior direito ou pressione ALT + X no teclado. Em seguida, escolha F12 Developer Tools . As Ferramentas do desenvolvedor são mostradas na parte inferior do Internet Explorer. O mesmo resultado pode ser obtido pressionando F12 no teclado.

Clique ou toque na guia Emulação e, em seguida, na lista suspensa Navegador . Aqui você deve selecionar o Windows Phone como seu dispositivo móvel, e a página da Web é recarregada como se você estivesse usando um smartphone com o Windows Phone . Infelizmente, o Internet Explorer não oferece a opção de emular smartphones Android ou iPhones e iPads.

Quando terminar, pressione o botão X (Fechar) no canto superior direito das ferramentas do desenvolvedor para voltar à navegação na área de trabalho.

Em quais sites você precisa emular um dispositivo móvel?

Agora você sabe como emular todos os tipos de dispositivos móveis no seu navegador da Web favorito. Antes de fechar este tutorial, informe-nos quais sites você precisa usar esse recurso de emulação. Estamos muito curiosos É o (in) famoso Instagram ou algum outro site móvel?