Como agora estamos no primeiro mundo móvel, torna-se cada vez mais importante poder testar sites facilmente em telefones celulares ou emulados. Colaboro com pessoas que trabalham em sites e ofertas de mídia social e gostaria de incentivá-las a abrir sites regularmente a partir de seus navegadores de desktop em uma exibição móvel. Estou pensando especificamente no recurso "visualização móvel" interno do navegador, que geralmente está oculto entre todas as outras ferramentas de desenvolvedor que um navegador fornece, mas fico feliz em considerar qualquer coisa que seja tão rápida de configurar.

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

Raposa de fogo:

• No Windows / Linux, pressione Ctrl+ Shift+M
• No macOS, pressione option+ command+M

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

Cromada:

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

• No Windows / Linux, pressione Ctrl+ Shift+ Iou apenasF12
• No macOS, pressione option+ command+I

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

• No Windows / Linux, pressione Ctrl+ Shift+M
• No macOS, pressione command+ shift+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 telefone celular na frente de uma tabela "Alternar barra de ferramentas do dispositivo".

Safári:

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

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

Beira:

• Pressione F12para abrir as ferramentas do desenvolvedor e, em seguida, Ctrl+ 7para 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".

A resposta de Flimm está 100% correta. No caso de lembrar dos atalhos é muito trabalhoso, é este 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 deseja emular no menu suspenso.

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

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Ambos os sites acima permitem visualizar meu aplicativo Web em várias larguras de dispositivos.

Adicione uma extensão "alternador de agente de usuário" no seu navegador e especifique um agente de usuário móvel. Se o site for suficientemente inteligente, ele servirá a versão otimizada para celular.

Não vou recomendar nenhuma extensão específica. O ideal deve ter predefinições para navegadores móveis integrados e a capacidade de ativar ou desativar a alternância de agente de usuário por site.

As respostas acima são ótimas para quem gosta de usar um único navegador ou possui um "espaço de trabalho" na área de trabalho limitado (por exemplo, monitor único com menos de 21 "em baixa resolução).

Na verdade, há uma solução ainda mais interessante que eu descobri recentemente: https://blisk.io/

Abster-me-ei de usar o (tipo de) "link afiliado" para qualquer ganho pessoal (existe um "sistema baseado em token" no qual você pode ganhar créditos para obter itens como "espaço em nuvem da equipe" e "recursos premium" gratuitos para usar com ), mas Blisk é realmente muito legal.

Este "navegador criado para o desenvolvimento" baseado em Chromium oferece várias maneiras de demonstrar a página em vários dispositivos com um "painel" vertical no lado esquerdo, como você vê as Ferramentas para Desenvolvedor do Chrome usar como padrão a coluna vertical direita.

É um trabalho de olhar. Embora haja alguns limites para sua "funcionalidade estendida freemium", ele ainda funciona muito bem para "visualizar" as versões para 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ê trabalhar em equipes remotas (embora eu ache que seja necessário um programa "test drive" melhor antes de conectar as pessoas ao custo mensal).

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

BliskDemoScreenshot

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

Prefiro o sabor "esolutions.se" por causa de como é fácil adicionar seqüências personalizadas de agente de usuário à lista para quantas personalizações você desejar (funciona off-line também, o que pode ser útil em certos casos): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Enfim, esses são meus 2 centavos. : P