Google Chrome - Zoom sem alterar a janela de visualização

Question

Talvez eu tenha esquecido algo ou não saiba formular bem minha pergunta, mas não consegui encontrar nada on-line sobre isso.

Gostaria de ampliar o Chrome, sem alterar a janela de visualização ou o site. Portanto, se eu ampliar um site, posso ampliar um detalhe sem que meu design responsivo o mova e dimensione para o tamanho "correto".

Existe uma extensão do Chrome para isso ou uma maneira de ativar essa função de zoom no Chrome?

Answer 1

Se você tiver um touchpad de precisão (a maioria dos laptops novos os tem) ou uma tela sensível ao toque, você pode apertar para aumentar o zoom.

Answer 2

Esta extensão é exatamente o que você está procurando:Zoom de página personalizado

mas, infelizmente, não possui atalhos.

PS: lembre-se de que esta extensão solicita acesso a dados de todos os sites que você visita por algum motivo.

Answer 3

Para macOS
Pegue a página da web. Pressione Command e o botão "+" para ampliar.

Para Windows
Pegue a página da web. Pressione e segure o botão Ctrl e role a roda do mouse para cima.

Editar

1) Vá para Preferências do Sistema-> Acessibilidade
2) Selecione Zoom e ative "Usar atalhos de teclado para ampliar"
3) Anote os atalhos.
4) Por padrão ⌥- ⌘- =para aumentar o zoom e ⌥- ⌘- -para diminuir o zoom.

Answer 4

Os agentes do usuário (Chrome, Firefox, Chrome para Android, etc.) têm o comportamento padrão de definir o corpo para 100% da janela de visualização, para ser mais preciso, a janela de visualização visual. Assim, quando a janela é redimensionada, a viewport (layout e visual) muda, o que faz com que ela sempreajustaro conteúdo e causando outras consequências indesejáveis ​​(nem sempre), como alterar o layout em designs responsivos.

Se você estiver usando uma abordagem mobile-first, defina body's min-width(em sua consulta de mídia) como um valor absoluto e use min-device-widthou max-device-widthpara acionar suas consultas de mídia.

Isso acionaria consultas de mídia, não quando a janela do navegador fosse redimensionada, mas somente quando o conteúdo fosse renderizado em um dispositivo cujo tamanho fosse mencionado na sua consulta de mídia.

Por exemplo:

body {
width : 90%;
}

E use a consulta de mídia como:

@media screen and (min-device-width: 960px) {

  body {
   width : 900px;
  }

// Other CSS Rules to apply when device width > 960px
}

Isso fará com que seu layout seja responsivo em dispositivos móveis, mas não em computadores, mesmo que a janela do navegador seja redimensionada ou ampliada. Em vez disso, ele coloca uma barra de rolagem horizontal quando o conteúdo é ampliado ou redimensionado.

Ao usar esta abordagem, você também pode pular o uso da <meta name="viewport" content="width=device-width, initial-scale=1" >tag (embora não seja recomendado)

Espero que isto ajude!