Como posso abrir rapidamente uma visualização móvel de uma página em um navegador de desktop?

Question

Como agora estamos em um mundo em primeiro lugar para dispositivos móveis, torna-se cada vez mais importante poder testar sites facilmente em telefones celulares ou em celulares emulados. Colaborei com pessoas que trabalham em websites e ofertas de mídia social e gostaria de incentivá-los a abrir regularmente websites de seus navegadores de desktop em uma visualização móvel. Estou pensando especificamente no recurso de "visualização móvel" do navegador, que geralmente fica oculto entre todas as outras ferramentas de desenvolvedor fornecidas por um navegador, mas estou feliz em considerar qualquer coisa que seja rápida de configurar.

Como você pode abrir uma visualização móvel de um site a partir de um navegador de computador?

    

Answer 1

Firefox:

• No Windows / Linux, pressione Ctrl + Deslocamento + M
• No macOS, pressione opção + comando + M

Você também pode encontrar o item de menu em ("Ferramentas"), "Desenvolvedor da Web", "Modo de design responsivo".

Chrome:

Você precisa ter as "Ferramentas do desenvolvedor" abertas primeiro:

• No Windows / Linux, pressione Ctrl + Deslocamento + I ou apenas F12
• No macOS, pressione opção + comando + I

Quando as ferramentas do desenvolvedor estiverem abertas e focadas, você poderá abrir a barra de ferramentas do dispositivo:

• No Windows / Linux, pressione Ctrl + Deslocamento + M
• No macOS, pressione comando + deslocamento + M

Você também pode encontrar o item de menu abrindo as ferramentas do desenvolvedor ("Mais ferramentas", "Ferramentas do Develepor") e clicando no ícone que se parece com um celular na frente da tabela "Barra de ferramentas do dispositivo de alternância". p>

Safari:

Parece que a Apple desativou por padrão o atalho de teclado para entrar no modo de design responsivo. Você pode seguir este tutorial sobre configurando um atalho de teclado para ele .

Você pode encontrar o item de menu clicando em "Desenvolver", "Entrar no modo de design responsivo". Se você não puder ver o item de menu "Desenvolver", será necessário ativá-lo abrindo "Preferências", "Avançado" e clicando em "Mostrar menu de desenvolvimento na barra de menus".

Borda:

• Pressione F12 para abrir as ferramentas do desenvolvedor e, em seguida, Ctrl + 7 para abrir a "guia Emulação". Configure o dispositivo que você deseja emular.

Você pode abrir as ferramentas do desenvolvedor usando o mouse clicando com o botão direito do mouse dentro da página da Web e escolhendo "inspecionar elemento".

    

Answer 2

A resposta do Flimm está 100% correta. Apenas no caso de lembrar os atalhos é muito complicado, é esse botão azul nas Ferramentas do desenvolvedor para alternar entre a visualização da Web e a visualização para celular / tablet:

Ou com o Firefox:

Depois de ativar a barra de ferramentas do dispositivo, você pode escolher a marca e o modelo do dispositivo que você deseja emular no menu suspenso.

    

Answer 3

Para fins de teste, eu uso os seguintes sites: -

1. link
2. link

Ambos os sites acima permitem que eu visualize meu aplicativo da web em várias larguras de dispositivos.

    

Answer 4

Adicione uma extensão "user agent switcher" no seu navegador e especifique um agente de usuário móvel. Se o site for inteligente , ele será veiculado em uma versão otimizada para celular.

Eu não recomendarei nenhuma extensão específica. O ideal deve ter predefinições para navegadores móveis integrados e a capacidade de ativar ou desativar a troca de agente do usuário por site.

    

Answer 5

As respostas acima são ótimas para aqueles que gostam de ficar com um único navegador ou têm um "espaço de trabalho" limitado (por exemplo, um monitor com menos de 21 "em baixa resolução).

Existe realmente uma solução ainda mais interessante que descobri recentemente: link

Vou me abster de usar o (tipo de) "link de afiliado" para qualquer ganho pessoal (há um "sistema baseado em tokens" que você pode ganhar créditos para obter recursos como "espaço de nuvem da equipe" e recursos premium gratuitos) "para usar com ele), mas o Blisk é realmente muito elegante.

Este "navegador baseado em cromo criado para desenvolvimento" fornece várias maneiras de demonstrar a página em vários dispositivos com um "painel" vertical do lado ESQUERDO, da mesma forma que você vê o padrão das Ferramentas do desenvolvedor do Chrome na coluna vertical direita.

É trabalhar uma olhada. Embora existam alguns limites para sua "funcionalidade estendida freemium", ainda funciona muito bem "pré-visualizar" as versões PC e Mobile de suas páginas / sites em uma comparação lado-a-lado. Os recursos pagos também parecem bastante radicais se você trabalha em equipes remotas (embora eu pessoalmente ache que ele precisa de um programa de "test drive" melhor antes de ligar as pessoas ao custo mensal).

Divulgação completa: há um "limite de tempo" extremamente irritante por dia na parte de visualização do dispositivo móvel (alterna entre abrir / fechar do ícone à direita da barra de endereço - alterar a "visualização do dispositivo" do link minúsculo para -o menu no canto superior direito "Mostrar lista de dispositivos").

BliskDemoScreenshot

Além disso: Eu encontrei alguns truques realmente interessantes com extensões de navegador como os 2 "User-Agent Switcher" diferentes do Chrome / Firefox que vão um pouco mais longe, permitindo que você alterne entre strings de agente de usuário do navegador de vários sistemas operacionais e os navegadores para eles.

Eu prefiro o sabor "esolutions.se" devido à facilidade de adicionar strings personalizadas de agente do usuário à lista de quantas personalizações você desejar (também executado off-line, o que pode ser útil em certos casos) : link

De qualquer forma, são meus 2 centavos. : P