Use o Device Mode do Chrome DevTools para criar sites totalmente responsivos e que priorizam dispositivos móveis. Saiba como usá-lo para simular diversos dispositivos diferentes e seus recursos.
Aviso: O Device Mode oferece uma boa aproximação de como seu site ficará em um dispositivo móvel, mas, para ter uma perspectiva completa, teste seu site em dispositivos reais. O DevTools não pode emular as características de desempenho de dispositivos móveis, por exemplo.
Resumo
- Emule seu site em diferentes tamanhos e resoluções de tela, incluindo telas Retina.
- Projete com responsividade visualizando e inspecionando consultas de mídia CSS.
- Avalie o desempenho do seu site usando o emulador de rede, sem afetar o tráfego de outras abas.
- Simule entradas de dispositivo com precisão para eventos de toque, geolocalização e orientação do dispositivo
Alternar Device Mode
Use o botão Device Mode para ativar ou desativar o Device Mode.
Quando o Device Mode está ativado, o ícone é azul
(
).
Quando ele está desativado, o ícone é cinza
(
).
O Device Mode é ativado por padrão.
Você também pode alternar o Device Mode pressionando Command+Shift+M (Mac) ou Ctrl+Shift+M (Windows, Linux). Para usar esse atalho, o mouse deve estar focado na janela do DevTools. Se ele estiver focado na janela de visualização, você acionará o atalho de alternar usuário do Chrome.