Como visualizar a versão móvel de um site em um PC

Se você é um desenvolvedor da Web ou possui um negócio online, pode estar curioso para saber como um site móvel fica em um desktop. A aparência e a funcionalidade do seu site para celular podem ser cruciais, pois mais da metade do tráfego da Internet vem de telefones. É mais provável que os clientes permaneçam em um site por mais tempo ou comprem algo se for visualmente atraente. Uma visualização da área de trabalho também pode ajudá-lo a fazer edições e corrigir possíveis problemas mais cedo.

Felizmente, este é um processo relativamente simples. Neste artigo, mostraremos como visualizar uma versão móvel de um site em diferentes dispositivos e navegadores.

Como visualizar a versão móvel de um site no Chrome em um Mac

No Chrome, você pode testar o front-end e ver se todos os componentes do site estão funcionando corretamente usando uma ferramenta de desenvolvedor integrada chamada DevTools. Por fornecer opções de dispositivos predefinidas, o DevTools é a melhor maneira de o desenvolvedor mudar rapidamente a visão do desktop para o celular e vice-versa sem nenhuma extensão do desenvolvedor.

Você também pode alterar o tamanho da tela para atender às suas necessidades e ajustar a largura e a altura da tela para ver como seu site ficará em diferentes tamanhos de tela. Para fazer isso em um Mac, siga estas etapas:

1. Inicie o navegador Google Chrome e acesse o site que deseja visualizar.
   
2. Pressione F12 no seu teclado para acessar o DevTools.
   
3. Quando o modo estiver ativado, clique no ícone Toggle Device Emulation.
   
4. Você pode escolher em uma lista de dispositivos iOS e Android para emulá-los.
   
5. Ele mostrará o site no formato móvel que você escolheu.
   

Quando terminar, basta fechar a janela de ferramentas do desenvolvedor para fechar a versão móvel do site.

Como visualizar a versão móvel de um site no Chrome em um PC com Windows

Se você deseja visualizar uma versão móvel de um site no Windows PC no Chrome, é um processo bastante semelhante:

1. Abra o navegador Chrome.
   
2. No Chrome, acesse o site que você deseja ver na versão móvel.
3. Clique com o botão direito do mouse na página da Web e selecione Inspecionar no menu.
   
4. Para ir para Developer Tools, clique na guia More Tools e selecione Developer Tools ou pressione F12 para abrir DevTools.
   
5. A janela Ferramentas do desenvolvedor será aberta.
6. Clique no ícone de alternância de dispositivo para alternar para o modo de exibição de site móvel.
   
7. Escolha o dispositivo móvel que você gostaria de emular (opcional).
   
8. Agora você pode modificar as dimensões da tela para atender às suas necessidades.

Como visualizar a versão móvel de um site no Chrome em um Chromebook

Acessar a versão móvel de um site no Chrome usando um Chromebook é muito semelhante aos dois primeiros métodos.

1. Abra o navegador da web Google Chrome.
   
2. Abra a página da Web que você deseja acessar em seu dispositivo móvel.
   
3. Para acessar o menu, clique no ícone de três pontos verticais.
   
4. Arraste o mouse sobre o item Mais Ferramentas na lista.
   
5. Selecione Ferramentas do desenvolvedor.
   
6. A janela Ferramentas do desenvolvedor no navegador será aberta.
   
7. Alterne o modo de visualização do site móvel clicando no ícone de alternância do dispositivo.
   

Isso abrirá a interface do usuário para o site móvel. Você também pode escolher a experiência de dispositivo preferida selecionando a marca e o modelo na caixa suspensa. A página da Web será atualizada como um site de desktop sempre que você fechar o console de ferramentas do desenvolvedor.

Como visualizar a versão móvel de um site no Firefox em um Mac

Você pode usar outros navegadores da Web, como o Firefox, para visualizar um site móvel em um desktop Mac. Redimensionar a janela do navegador é um dos métodos que a maioria dos desenvolvedores da Web usa para avaliar o site de design responsivo. No entanto, na maioria das vezes, essa alternativa não parecerá aceitável.

É aí que os recursos de desenvolvimento web do navegador Firefox são úteis. Você pode navegar em suas páginas da web em várias resoluções se souber como acessar versões móveis de sites no Firefox. Siga esses passos:

1. Abra a versão móvel do site que você deseja ver.
2. Clique com o botão direito do mouse na página da Web e selecione a opção Inspecionar no menu.
   
3. Escolha o modo de design responsivo.
   
4. Escolha o tamanho da tela do site.
   

Como visualizar a versão móvel de um site no Firefox em um PC com Windows

Os PCs com Windows também têm a opção de visualizar versões móveis de sites usando o Firefox. Veja como fazer isso:

1. Inicie o Firefox no seu PC.
   
2. Vá para o site que você deseja ver como uma versão móvel.
   
3. Vá para Configurações clicando no ícone de três barras horizontais.
   
4. Você verá um menu suspenso onde terá que escolher uma opção de desenvolvedor da Web.
   
5. Selecione o modo de design responsivo.
   
6. Por fim, você pode selecionar um modelo de smartphone para ver como seu site aparecerá nesse dispositivo.
   

Como visualizar a versão móvel de um site no Safari em um Mac

Abordamos como visualizar um site para dispositivos móveis em um desktop usando o Chrome e o Firefox. Mas e o navegador padrão que vem com dispositivos Mac, o Safari? Felizmente, também é possível visualizar uma versão móvel de um site no Safari.

1. Inicie o navegador Safari.
   
2. Vá para o site que você deseja visualizar como uma versão móvel.
   
3. Clique em Opções e depois no menu Desenvolver.
   
4. No menu suspenso, escolha Entrar no modo de design responsivo.
   
5. Agora você pode ver a versão móvel do site.
   

Perguntas frequentes adicionais

Posso ver a versão desktop de um site no meu telefone?

A resposta é sim! Você pode alternar da versão móvel para a versão desktop para conferir sem usar um computador. As etapas para mudar a versão móvel para a versão desktop no Chrome são as seguintes:

1. Vá para o site que deseja ver na área de trabalho.

2. Toque no ícone de três pontos para acessar o menu.

3. Selecione a opção Desktop View agora.

Lembre-se de que essas etapas podem variar dependendo do telefone que você está usando.

onde está a pasta de inicialização no windows 10

Facilitando o design da Web para dispositivos móveis

As ferramentas de desenvolvedor são ótimas para analisar e modificar uma versão móvel de um site em um desktop sem trocar de dispositivo. Você pode alterar o tamanho da tela para observar como os componentes funcionam em vários dispositivos. Você pode ajustar diferentes componentes e criar o site para vários tamanhos de tela usando o modo responsivo.

Ao projetar um site, o designer deve sempre ter em mente como o front-end do site aparece em telefones, tablets e desktops. Usar os métodos descritos no artigo também pode ajudar o desenvolvedor a fazer isso e também a identificar quais componentes de um site estão criando problemas para corrigi-los.

Você já tentou visualizar uma versão móvel de um site em seu desktop? Qual navegador você prefere usar para fazer isso? Deixe-nos saber na seção de comentários abaixo.