Use a tag Meta Viewport para controlar o layout em navegadores móveis – mozilla mdn mercado bitcoin reclame aqui

Os dispositivos de tela estreita (por exemplo, móveis) exibem páginas em uma janela ou janela virtual, que geralmente é mais larga que a tela e reduzem o resultado, para que ela possa ser vista imediatamente. Os usuários podem ver, deslocar e aplicar zoom em diferentes áreas da página. Se, por exemplo, uma tela de celular tiver uma largura de 640px, as páginas podem ser feitas com uma janela virtual de 980px, elas serão reduzidas para caber no espaço de 640px.

Isso acontece porque muitas páginas não são otimizadas para dispositivos móveis e são interrompidas (ou pelo menos não parecem boas) com uma largura de janela reduzida. Essa janela virtual é uma maneira de tornar os sites que não são otimizados para celulares, geralmente mais bonitos em dispositivos com uma tela estreita.


entrar Meta do Viewport marca

No entanto, esse mecanismo para otimizar as páginas para telas estreitas com solicitações de mídia não é muito bom – se a janela virtual 980px, por exemplo, usar solicitações de mídia de 640px ou 480px ou menos nunca será usada, limitando a eficiência das técnicas de projeto reativas.

Para corrigir esse problema, a Apple apresentou o "Meta do Viewport marca" no Safari iOS, para que os desenvolvedores da Web possam controlar o tamanho e o tamanho da janela. Muitos outros navegador móvel agora suporta essa tag, embora não faça parte de um padrão da web. A documentação da Apple explica como os desenvolvedores da Web podem usar essa tag, mas tivemos que fazer algum trabalho de detetive para entender como implementá-la no Fennec. Por exemplo, a documentação do Safari afirma que o conteúdo é: "Lista separada por vírgula," no entanto, navegadores e páginas da Web existentes usam vírgulas, ponto e vírgula e espaços como separadores.

A propriedade width controla o tamanho da janela. Ele pode ser definido para um número específico de pixels, como Largura = 600, ou o valor específico de Largura do dispositivo, que é a largura da tela CSS em pixels na escala de 100%. (Existem valores de tom e altura do dispositivo correspondente que mudam de acordo com a altura de exibição em tamanho ou posição para as páginas cujos itens podem ser úteis).

As resoluções de tela cresceram nos últimos anos, já que os pixels individuais são praticamente indistinguíveis do olho humano. Por exemplo, smartphones mais recentes normalmente têm uma tela de 5 polegadas com resoluções maiores que 1920-1080 pixels (~ 400 dpi). Por causa disso, muitos navegadores podem visualizar suas páginas em um tamanho físico menor traduzindo vários pixels de hardware para cada CSS "pixels", Inicialmente, isso causou problemas de usabilidade e legibilidade em muitos sites sensíveis ao toque. Peter-Paul Koch escreveu sobre esse problema em: Um pixel não é um pixel.

Em telas de alta resolução, as páginas com escala original = 1 serão efetivamente ampliadas pelos navegadores. Seu texto será suave e limpo, mas seus bitmaps provavelmente não serão beneficiados com a resolução em tela cheia. Para obter imagens mais nítidas nessas telas, os desenvolvedores da Web devem criar imagens – ou definir página inteira – para dimensionar mais do que seu tamanho final e redimensionar propriedades CSS ou viewports. Isso está de acordo com a especificação CSS 2.1, que diz:

Se o densidade de pixels O dispositivo de saída é muito diferente daquele de uma tela de computador típica. O agente do usuário deve ajustar os valores de pixel. Recomenda-se que a unidade de pixel se refira ao número inteiro de pixels da câmera mais próxima do pixel de referência. Recomenda-se que o pixel de referência seja o ângulo de visualização de um pixel em um dispositivo com uma densidade de pixels de 96 dpi e uma distância do leitor de um comprimento de braço.

Para desenvolvedores da Web, isso significa que o tamanho de uma página é muito menor do que o número real de pixels e que os navegadores podem ajustar seus layouts e imagens de acordo. Tenha em mente que nem todos os dispositivos móveis têm a mesma largura. Você precisa garantir que suas páginas funcionem em uma variedade de tamanhos e orientações de tela.

A taxa de pixels padrão depende da densidade de exibição. Em uma exibição com densidade menor que 200 dpi, a proporção é 1.0. Em telas com densidade entre 200 e 300 dpi, a proporção é de 1,5. Para exibições com densidade maior que 300 dpi, a taxa é o número inteiro (densidade / 150 dpi). Observe que a taxa padrão é verdadeira somente se a escala da janela for igual a 1. Caso contrário, o relacionamento entre pixels CSS e pixels do dispositivo depende do nível de zoom atual. Largura da janela e largura da tela

Os sites podem definir suas janelas para um tamanho específico. Por exemplo, a definição "Largura = 320, escala inicial = 1" pode caber exatamente em uma pequena tela do telefone no modo retrato. Isso pode causar problemas se o navegador não ampliar a página. Para resolver esse problema, os navegadores estendem a largura da janela conforme necessário para preencher a tela com a escala necessária. Isso é especialmente útil em telas grandes como o iPad. (Escolhendo uma janela de exibição para páginas do iPad Allen Pike fornece uma boa explicação para desenvolvedores da Web.)

Para páginas que definem uma escala inicial ou máxima, isso significa que a propriedade width é realmente convertida em uma largura mínima da janela. Por exemplo, se seu layout exigir uma largura de pelo menos 500 pixels, você poderá usar a seguinte marcação. Se a tela tiver mais de 500 pixels de largura, o navegador ampliará a janela (em vez de aplicar zoom) para caber na tela:

Nem tudo navegador móvel Gerencie as mudanças de orientação da mesma maneira. Por exemplo, o Mobile Safari geralmente puxa a página quando você alterna do modo retrato para o modo paisagem, em vez da página, como se eles tivessem sido originalmente carregados na orientação paisagem. Se os desenvolvedores da web quiserem manter suas configurações de escala consistentes durante a camada no iPhone, eles devem adicionar o valor máximo para evitar esse zoom, o que às vezes tem o efeito colateral de impedir que os usuários façam zoom:

Para ver quais dispositivos móveis e tablets são a largura da janela de exibição, consulte a lista completa de tamanhos de janela de exibição para celular e tablet aqui. Isso fornece informações como a largura da janela de exibição no formato retrato e paisagem, bem como o tamanho da exibição física, o sistema operacional eo densidade de pixels do dispositivo. Especificações Especificações

Há claramente uma demanda por Meta do Viewport Dia, porque é apoiado pelos mais populares navegador móvel e usado por milhares de sites. Seria bom ter um padrão real para páginas da web para controlar as propriedades da janela. À medida que o processo de padronização progride, a Mozilla trabalhará para aprender sobre as mudanças.