Como estamos agora em um mundo que prioriza os dispositivos móveis, torna-se cada vez mais importante poder testar sites facilmente em telefones celulares ou em telefones celulares emulados. Colaboro com pessoas que trabalham em sites e ofertas de mídia social e gostaria de incentivá-los a abrir sites regularmente em seus navegadores de desktop em uma visualização móvel. Estou pensando especificamente no recurso de “visualização móvel” integrado do navegador, que geralmente fica oculto entre todas as outras ferramentas de desenvolvedor que um navegador oferece, mas fico feliz em considerar qualquer coisa que seja igualmente rápida de configurar.
Como você pode abrir uma visualização móvel de um site em um navegador de desktop?
Responder1
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 Web", "Modo de Design Responsivo".
Cromo e Borda:
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á alternar a emulação do dispositivo:
- No Windows/Linux, pressione Ctrl+ Shift+M
- No macOS, pressione command+ shift+M
Há um pequeno botão na barra de ferramentas de ferramentas do desenvolvedor que permite a emulação de dispositivos, se você preferir clicar em um botão em vez de pressionar um atalho de teclado.
Safári:
Parece que a Apple desativou por padrão o atalho de teclado para entrar no modo de design responsivo. Você pode seguireste 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 você não consegue ver o item de menu "Desenvolver", você precisa habilitá-lo abrindo "Preferências", "Avançado" e marcando "Mostrar menu Desenvolver na barra de menu".
Responder2
A resposta de Flimmestá 100% correto. Caso lembrar dos atalhos seja muito incômodo, é este botão azul nas Ferramentas do desenvolvedor para alternar entre a visualização da web e a visualização de dispositivos móveis/tablets:
Ou com Firefox:
Depois de ativar a barra de ferramentas do dispositivo, você poderá escolher a marca e o modelo do dispositivo que deseja emular no menu suspenso.
Responder3
Para fins de teste, eu uso os seguintes sites: -
Ambos os sites acima me permitem visualizar meu aplicativo da web em várias larguras de dispositivos.
Responder4
Adicione uma extensão "alternador de agente de usuário" em seu navegador e especifique um agente de usuário móvel. Se o site forinteligentesuficiente, ele servirá a você uma versão otimizada para celular.
Não recomendarei nenhuma extensão específica. O ideal deve ter predefinições para navegadores móveis integradas e a capacidade de ativar ou desativar a troca de agente do usuário por site.