Adaptação do seu site para diferentes tamanhos de janela

IEBlog Português

Blog da equipe de engenharia do Windows Internet Explorer

Adaptação do seu site para diferentes tamanhos de janela

  • Comments 0

O IE10 no Windows 8 Release Preview oferece suporte às propriedades de largura e altura Adaptação de Dispositivo CSS do rascunho de trabalho do W3C. Isso oferece aos desenvolvedores da Web uma ferramenta simples para controlar a colocação em escala do conteúdo automático em várias dimensões de janela. Especificamente, ele permite que sites da Web se adaptem facilmente ao navegador estilo Metro do Windows 8 na exibição ajustada e na orientação retrato.

Colocação em escala automática e quando usar

A maioria dos sites priorizaram a otimização para uma janela de 1024 pixels de largura. Isso garante uma boa experiência do usuário para uma ampla variedade de telas quando o navegador está maximizado. No entanto, os sites podem não funcionar bem em novos formatos, como tablets e orientações de tela retrato, se eles não tiverem sido otimizados para outros tamanhos de janela também. Especificamente, na maioria das vezes as páginas cortam ou distorcem layouts quando exibidas em uma largura estreita.

Captura de tela do site TechCrunch exibido em uma Janela bem estreita. Apenas a borda esquerda do conteúdo do site fica visível.Captura de tela de uma Wikipédia exibida em uma Janela bem estreita. A barra de navegação fica visível; o artigo em destaque fica legível, mas preso em uma coluna muito estreita.
Captura de tela do site TechCrunch e Wikipédia exibida em uma Janela bem estreita

Esse layout estreito é especialmente importante no Windows 8, onde a exibição ajustada do navegador estilo Metro está neste mesmo estado. Essa situação também ocorre no modo retrato em dispositivos slate devido ao formato menor.

No navegador estilo Metro, a exibição ajustada e o modo retrato são colocadas em escala automaticamente por padrão para garantir pelo menos 1024 pixels de largura de layout. Os dispositivos móveis usam uma abordagem parecida ao exibir sites otimizados que não são móveis em um formato estreito. Como a maioria dos sites é criada para funcionar bem a 1024 pixels, isso garante que eles sejam bem projetados e não cortem conteúdo por padrão.

Captura de tela do site TechCrunch exibido na tela ajustada estilo Metro. A página inteira como projetada para uma largura de 1024 pixels fica visível e com zoom para caber.Captura de tela da Wikipédia exibida no navegador estilo Metro em uma visualização ajustada. A página inteira como projetada para uma largura de 1024 pixels fica visível e com zoom para caber.
TechCrunch e Wikipédia exibidos em um navegador estilo Metro do Windows 8 em exibição ajustada

Embora essa abordagem garanta uma boa experiência padrão, os usuários precisarão aplicar o zoom para exibir e interagir com o site.

Bom funcionamento em uma janela estreita

Os melhores layouts estreitos são personalizados pelo desenvolvedor da Web. Além de ajustar o site para uma região ainda mais estreita, isso também pode exigir alterações em tamanhos de imagens, reorganização de conteúdo, ferramentas alternativas para navegação do site ou outras alterações essenciais ao conteúdo.

Se o seu site já tiver feito essas modificações para janelas estreitas, a Adaptação de Dispositivo poderá ser usada para substituir a escala padrão.

Para ver alguns ótimos exemplos de layouts adaptáveis, confira Consultas de mídia. O Metal Toad Media também apresenta um ótimo artigo que fala sobre suporte à largura de layout com base nos principais dispositivos e tamanhos de tela no mercado.

Uso de @-ms-viewport

Suporte simples à exibição ajustada. Se o seu site já estiver habilitado para um layout de 320 pixels de largura, você pode optar facilmente por exibir essa versão na exibição ajustada. A combinação da Adaptação de Dispositivo às consultas de mídia CSS permite que o recurso de colocação de escala automática seja substituído de forma seletiva. Esse CSS substitui a colocação em escala padrão e, em vez disso, reforça uma largura de layout consistente de 320 pixels para todas as janelas de 320 pixels amplas ou mais estreitas:

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

Quando a janela tem menos de 320 pixels de largura, o conteúdo será diminuído para caber nela. Por exemplo, uma janela de 300 pixels de largura mostrará o conteúdo a uma escala de 93,75%. Para larguras superiores, a colocação em escala normal do IE10 se aplica (por exemplo, quando o navegador estilo Metro estiver no modo retrato).

A adaptação de dispositivo é degradada de forma graciosa em navegadores que ainda não a suportam. Esses navegadores ainda podem se beneficiar de um suporte a layout estreito, eles só não poderão usar a colocação em escala automática para ajustar o conteúdo na janela.

Suporte a retrato. Se o seu site oferece suporte ao layout de 768 pixels de largura também, o suporte ao modo retrato pode ser facilmente adicionado com uma segunda regra do viewport:

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

 

@media screen and (min-width: 768px) and (max-width: 959px) {

@-ms-viewport { width: 768px; }

}

Recomendamos o teste do site em larguras de layout de 768 pixels (retrato na maioria dos slates) e 320 pixels (navegador ajustado estilo Metro), além de 1024 pixels e superiores (paisagem). Você pode ver um exemplo da regra do viewport em efeito na demonstração Use o ajuste! no site de "test drive" do IE.

—Matt Rakow‎, gerente de programas, Internet Explorer

  • Loading...