Por que alguns sites da área de trabalho entram no modo móvel com certa porcentagem de zoom?

0

Por exemplo, quando vou a este site na minha área de trabalho e faço 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?

    
por Luke1018 24.11.2015 / 06:45

2 respostas

2

Is this how mobile-mode or mobile-sites are activated - is it the screen resolution?

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

Veja Web design responsivo

Uma maneira típica de conseguir isso seria ter algo parecido com 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 nas seções posteriores para reorganizar os menus e mostrar as 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" ao aumentar o zoom. Mesmo que a janela não tenha mudado de tamanho, eles estão ampliando o conteúdo e reconhecem que isso é, de alguma forma, equivalente à redução do 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 real e fazem escolhas com base nisso - essa é uma abordagem que exige manutenção contínua à medida que novos dispositivos e novos navegadores são introduzidos.

    
por 24.11.2015 / 13:25
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, alimenta a versão para dispositivos móveis.

    
por 24.11.2015 / 07:06