Por que alguns sites de desktop se transformam em modo móvel em determinados zoom em porcentagem?

0

Por exemplo, quando vou a esse site na minha área de trabalho e zoom em até 300% o site parece se transformar em modo móvel. Um botão de menu aparece com zoom de aproximadamente 300% (Google Chrome com resolução de tela de 1920 x 1080).

É assim que o modo móvel ou os sites móveis são ativados - é a resolução da tela?

google-chrome browser mobile-phone Luke1018
fonte
1
Isso é chamado de design responsivo. No css do site, há regras que fazem com que diferentes decisões de layout sejam tomadas, dependendo da largura da viewport. À medida que reduz o navegador, você está acionando layouts destinados a um telefone.
Paul

Respostas:

2

É assim que o modo móvel ou os sites móveis são ativados - é a resolução da tela?

Sim, é assim que muitos sites se adaptam para caber no espaço disponível.

Vejo Web design responsivo

Uma maneira típica de conseguir isso seria ter algo como o seguinte em CSS 

 /* ======== Styling common to all sized devices ======== */
 ...
 /* ========= Styling for desktops ===================== */
 @media screen and (min-width: 901px) {
 ...
 /* ========= Styling for tablets ===================== */
 @media screen and (min-width: 671px) and (max-width: 900px) {
 ...

Onde a maior parte do CSS (digamos 95%) está na primeira seção, o que por si só é adequado para telefones. Isso é anulado em seções posteriores para reorganizar menus e reexibir barras laterais opcionais etc.

Portanto, se você redimensionar a janela do navegador da área de trabalho para o mesmo tamanho (em pixels) que a tela do seu celular, esperaria ver o mesmo layout de website otimizado para dispositivos móveis.

Navegadores modernos se esforçam muito para fazer a "coisa certa" quando você aumenta o zoom. Mesmo que a janela não tenha mudado de tamanho, eles estão ampliando o conteúdo e eles reconhecem que isso é, de alguma forma, equivalente a reduzir o tamanho da janela - Então, eles reinterpretam o CSS de acordo.

Nem todos os sites funcionam assim, muitos ainda tentam detectar o dispositivo ou navegador e fazer escolhas com base nisso - essa é uma abordagem que requer manutenção contínua à medida que novos dispositivos e novos navegadores são introduzidos.

RedGrittyBrick
fonte
1

Depende de como o site é codificado, mas geralmente tem a ver com a resolução 'virtual' - a resolução da qual o navegador da Web está em diferentes níveis de zoom. Por isso, um zoom de 300% a 1920 x 1080 transforma-o numa área de 640 x 360. Esta resolução é provavelmente captada pela página Web como uma resolução "móvel" - por isso, fornece-lhe a versão para dispositivos móveis.

Bilfred
fonte