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

Se você é um desenvolvedor da Web ou possui um negócio on-line, pode estar curioso para saber como é a aparência de um site para celular em um computador. 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.

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

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 verificar se todos os componentes do site estão funcionando corretamente usando uma ferramenta de desenvolvedor integrada chamada DevTools. Por fornecer opções predefinidas de dispositivos, o DevTools é a melhor maneira de o desenvolvedor mudar rapidamente a visualizaçã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 vá para o site que deseja visualizar.
    Como visualizar a versão móvel de um site em um PC
  2. Pressione F12 no teclado para acessar o DevTools.
    Como visualizar a versão móvel de um site em um PC
  3. Quando o modo estiver ativado, clique no ícone “Toggle Device Emulation”.
    Como visualizar a versão móvel de um site em um PC
  4. Você pode escolher em uma lista de dispositivos iOS e Android para emulá-los.
    Como visualizar a versão móvel de um site em um PC
  5. Ele mostrará o site no formato móvel que você escolheu.
    Como visualizar a versão móvel de um site em um PC

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.
    Como visualizar a versão móvel de um site em um PC
  2. No Chrome, acesse o site que 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.
    Como visualizar a versão móvel de um site em um PC
  4. Para acessar as Ferramentas do desenvolvedor, clique na guia “Mais ferramentas” e selecione “Ferramentas do desenvolvedor” ou pressione F12 para abrir o DevTools.
    Como visualizar a versão móvel de um site em um PC
  5. A janela Ferramentas do desenvolvedor será aberta.
  6. Clique no ícone de alternância do dispositivo para alternar para o modo de visualização do site móvel.
    Como visualizar a versão móvel de um site em um PC
  7. Escolha o dispositivo móvel que você gostaria de emular (opcional).
    Como visualizar a versão móvel de um site em um PC
  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 Google Chrome.
    Como visualizar a versão móvel de um site em um PC
  2. Abra a página da Web que deseja acessar em seu dispositivo móvel.
    Como visualizar a versão móvel de um site em um PC
  3. Para acessar o menu, clique no ícone vertical de três pontos.
    Como visualizar a versão móvel de um site em um PC
  4. Arraste o mouse sobre o item Mais ferramentas na lista.
    Como visualizar a versão móvel de um site em um PC
  5. Selecione "Ferramentas do desenvolvedor".
    Como visualizar a versão móvel de um site em um PC
  6. A janela Ferramentas do desenvolvedor no navegador será aberta.
    Como visualizar a versão móvel de um site em um PC
  7. Alterne o modo de visualização do site móvel clicando no ícone de alternância Dispositivo.
    Como visualizar a versão móvel de um site em um PC

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 design responsivo do site. No entanto, na maioria das vezes, essa alternativa não parecerá aceitável.

É aí que os recursos de desenvolvimento da 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.
    Como visualizar a versão móvel de um site em um PC
  3. Escolha o “Modo de design responsivo”.
    Como visualizar a versão móvel de um site em um PC
  4. Escolha o tamanho da tela do site.
    Como visualizar a versão móvel de um site em um PC

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.
    Como visualizar a versão móvel de um site em um PC
  2. Vá para o site que deseja ver como uma versão móvel.
    Como visualizar a versão móvel de um site em um PC
  3. Vá para “Configurações” clicando no ícone de três barras horizontais.
    Como visualizar a versão móvel de um site em um PC
  4. Você verá um menu suspenso onde deverá escolher a opção “Desenvolvedor Web”.
    Como visualizar a versão móvel de um site em um PC
  5. Selecione “Modo de design responsivo”.
    Como visualizar a versão móvel de um site em um PC
  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 em um PC

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

Abordamos como visualizar um site móvel em um desktop usando o Chrome e o Firefox. Mas e o navegador padrão que vem com os 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.
    Como visualizar a versão móvel de um site em um PC
  2. Vá para o site que deseja visualizar como uma versão móvel.
    Como visualizar a versão móvel de um site em um PC
  3. Clique em “Opções” e depois no menu “Desenvolver”.
    Como visualizar a versão móvel de um site em um PC
  4. No menu suspenso, escolha “Entrar no modo de design responsivo”.
    Como visualizar a versão móvel de um site em um PC
  5. Agora você pode visualizar a versão móvel do site.
    Como visualizar a versão móvel de um site em um PC

Perguntas frequentes adicionais

Posso visualizar a versão para 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 visualização da área de trabalho.

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

3. Selecione a opção “Visualização da área de trabalho” agora.

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

Tornando o design da Web móvel mais fácil

As ferramentas do 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. O uso dos 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.

Sign up and earn $1000 a day ⋙

Leave a Comment

O que é VPN? Vantagens e desvantagens da VPN (rede privada virtual)

O que é VPN? Vantagens e desvantagens da VPN (rede privada virtual)

O que é VPN? Quais são as vantagens e desvantagens? Vamos discutir com a WebTech360 a definição de VPN e como aplicar esse modelo e sistema no trabalho.

A maioria das pessoas não usa esses recursos ocultos na Segurança do Windows.

A maioria das pessoas não usa esses recursos ocultos na Segurança do Windows.

O Windows Security faz mais do que apenas proteger contra vírus básicos. Ele protege contra phishing, bloqueia ransomware e impede a execução de aplicativos maliciosos. No entanto, esses recursos não são fáceis de identificar — eles ficam escondidos atrás de várias camadas de menus.

A codificação não é tão difícil quanto você pensa

A codificação não é tão difícil quanto você pensa

Depois que você aprender e realmente experimentar por si mesmo, descobrirá que a criptografia é incrivelmente fácil de usar e incrivelmente prática para a vida cotidiana.

Recuperar dados excluídos com o Recuva Portable no Windows 7

Recuperar dados excluídos com o Recuva Portable no Windows 7

No artigo a seguir, apresentaremos as operações básicas para recuperar dados excluídos no Windows 7 com a ferramenta de suporte Recuva Portable. Com o Recuva Portable, você pode armazená-lo em qualquer USB conveniente e usá-lo sempre que precisar. A ferramenta é compacta, simples e fácil de usar, com alguns dos seguintes recursos:

Como excluir arquivos duplicados para economizar memória do computador usando o CCleaner

Como excluir arquivos duplicados para economizar memória do computador usando o CCleaner

O CCleaner verifica se há arquivos duplicados em apenas alguns minutos e depois permite que você decida quais são seguros para excluir.

Por que alterar o local de download padrão no Windows 11?

Por que alterar o local de download padrão no Windows 11?

Mover a pasta Download da unidade C para outra unidade no Windows 11 ajudará a reduzir a capacidade da unidade C e ajudará seu computador a funcionar de maneira mais suave.

Como interromper atualizações do Windows no PC

Como interromper atualizações do Windows no PC

Esta é uma maneira de fortalecer e ajustar seu sistema para que as atualizações aconteçam de acordo com sua programação, não a da Microsoft.

Como mostrar extensões de arquivo, visualizar extensões de arquivo no Windows

Como mostrar extensões de arquivo, visualizar extensões de arquivo no Windows

O Explorador de Arquivos do Windows oferece diversas opções para alterar a forma como você visualiza seus arquivos. O que você talvez não saiba é que uma opção importante está desabilitada por padrão, embora seja crucial para a segurança do seu sistema.

5 ferramentas gratuitas para encontrar spyware e adware no seu PC

5 ferramentas gratuitas para encontrar spyware e adware no seu PC

Com as ferramentas certas, você pode escanear seu sistema e remover spyware, adware e outros programas maliciosos que possam estar à espreita nele.

14 aplicativos e softwares do Windows que você precisa no seu novo computador

14 aplicativos e softwares do Windows que você precisa no seu novo computador

Abaixo está uma lista de softwares recomendados ao instalar um novo computador, para que você possa escolher os aplicativos mais necessários e melhores para o seu computador!

Como clonar as configurações do Windows para levar seu fluxo de trabalho para qualquer lugar

Como clonar as configurações do Windows para levar seu fluxo de trabalho para qualquer lugar

Carregar um sistema operacional inteiro em um pendrive pode ser muito útil, especialmente se você não tiver um laptop. Mas não pense que esse recurso se limita às distribuições Linux — é hora de tentar clonar sua instalação do Windows.

Desative estes 7 serviços do Windows para prolongar a duração da bateria!

Desative estes 7 serviços do Windows para prolongar a duração da bateria!

Desativar alguns desses serviços pode economizar uma quantidade significativa de bateria sem afetar seu uso diário.

Para que serve o atalho Ctrl + Z no Windows? Provavelmente mais do que você imagina.

Para que serve o atalho Ctrl + Z no Windows? Provavelmente mais do que você imagina.

Ctrl + Z é uma combinação de teclas extremamente comum no Windows. Ctrl + Z basicamente permite desfazer ações em todas as áreas do Windows.

Não clique em nenhum link encurtado até ter certeza de que é seguro!

Não clique em nenhum link encurtado até ter certeza de que é seguro!

URLs encurtadas são convenientes para limpar links longos, mas também ocultam o destino real. Se você quiser evitar malware ou phishing, clicar cegamente nesse link não é uma escolha inteligente.

Windows 11 22H2: atualização Moment 1 com muitos recursos notáveis

Windows 11 22H2: atualização Moment 1 com muitos recursos notáveis

Após uma longa espera, a primeira grande atualização do Windows 11 foi lançada oficialmente.