Adaptação de dispositivos

Como desenvolvedor da Web (ou de aplicativos da Windows Store que usam JavaScript), você enfrenta um dilema: codificar seu site para funcionar com o máximo possível de dispositivos, tamanhos e resoluções; ou correr o risco de alienar os usuários potencialmente permitindo que seu conteúdo seja cortado (em layouts fixos) ou embaralhado de forma confusa (em layouts fluidos). A regra @-ms-viewport, em conjunto com as Consultas de Mídia CSS (Folhas de Estilos em Cascata), tenta resolver esse dilema permitindo que desenvolvedores da Web e de aplicativos da Windows Store em JavaScript para Windows 8 otimizem o layout de sites e aplicativos para diferentes dispositivos com o mínimo de esforço.

A regra @-ms-viewport se baseia na regra @viewport, que é definida na especificação Adaptação de Dispositivo CSS. Essa especificação encontra-se atualmente no estágio de Versão Preliminar de Trabalho. Saiba que a implementação de @-ms-viewport no Internet Explorer 10 e nos aplicativos da Windows Store em JavaScript não é mapeada exatamente para as informações definidas na especificação. Isso pode mudar à medida que a especificação Adaptação de Dispositivo CSS é revisada e aprimorada.

Exibindo sites em janelas estreitas

Em sua maioria, os sites encontrados na Web hoje em dia não são muito úteis quando exibidos em uma janela muito estreita. Layouts fixos podem ficar cortados e layouts fluidos podem ficar embaralhados. É comum os cenários de aplicativos no Windows 8 envolverem janelas muito estreitas. Para evitar problemas de corte ou embaralhamento de conteúdo, este tem suas dimensões automaticamente reduzidas. Isso não exige esforço extra de sua parte como desenvolvedor, mas talvez não seja o ideal, dependendo da largura padrão do conteúdo. Os usuários serão obrigados a aplicar zoom toda vez que precisarem acessar o conteúdo.

Utilizando a regra @-ms-viewport, fica mais fácil criar sites e aplicativos otimizados. Em vez de forçá-lo a empregar um cenário de "tamanho único" no qual você pode ter de ampliar desajeitadamente uma interface pequena ou compactar excessivamente uma interface grande, você pode usar @-ms-viewport e o suporte existente às Consultas de Mídia CSS para otimizar seu site ou aplicativo para diferentes faixas de resolução. Você pode especificar que as páginas que são otimizadas para uma determinada faixa sejam dimensionadas de forma mais natural para os dispositivos com resoluções dentro dessa faixa. Assim, você pode otimizar o seu site não só para telas de desktop, mas também para slates pequenos ou até para o estado ajustado.

Usando a regra @-ms-viewport

A regra @-ms-viewport funciona em conjunto com consultas de mídia para ajudar a otimizar o layout. Geralmente, você aninha a regra @-ms-viewport dentro da consulta de mídia, como mostra o seguinte trecho de pseudocódigo:

@media [media query logic here] {
  @-ms-viewport {
    [viewport size here]
  }
  [CSS for this layout combination goes here.]
}

Note que, em outros navegadores sem ser o Internet Explorer 10 (ou em versões mais antigas do Windows Internet Explorer), a qualidade desse CSS sofre uma redução harmoniosa. A regra @-ms-viewport e seu conteúdo, se não forem reconhecidos, serão simplesmente ignorados.

Exemplo de uso: página da Web com otimização para o estado ajustado

O exemplo a seguir mostra um uso comum da regra @-ms-viewport. Especificamente, este seletor pode ser usado para otimizar uma versão pequena da sua página da Web para exibição no estado ajustado.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width Modern taskbar layout goes here */
} 

Qualquer visor com menos de 400 pixels de largura (por exemplo, o estado ajustado) tem o layout de uma largura de 320 pixels e é dimensionado para caber nesse espaço. O CSS listado abaixo dele (que supostamente foi otimizado para uma tela pequena) será aplicado.

Exemplo de uso: aplicativo de tamanho fixo

A seguir encontra-se um exemplo muito básico da regra @-ms-viewport em uso, sem nenhuma consulta de mídia (indicando que a regra se aplica a todos os casos).


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

Esse exemplo pode ser usado, por exemplo, em um aplicativo da Windows Store que usa JavaScript e está bloqueado em modo paisagem. Ele especifica que, seja qual for a resolução do vídeo ou a taxa de vídeo (4:3, 16:9 widescreen etc.), o conteúdo exibido (o "visor") deve sempre conter no mínimo 1024 pixels por 768 pixels. Por exemplo, no caso de um vídeo que tenha 1920 pixels por 1080 pixels (taxa 16:9 widescreen), a escala do visor é aumentada para se ajustar à altura do vídeo. Como se trata de uma tela widescreen, o aplicativo pode ser centralizado através de métodos normais de CSS para se obter um efeito de "pillarboxing" (barras pretas dos dois lados do visor). Em um vídeo de 1280×960, como a taxa de proporção é igual à do visor de 1024×768, a escala do visor aumentaria para preencher a tela completamente.

Podemos expandir esse exemplo adicionando consultas de mídia que levam em conta os dois modos, paisagem e retrato, nesse aplicativo:


@media screen and (orientation: landscape) {
  @-ms-viewport {
    width: 1024px;
    height: 768px;
  }
  /* CSS for landscape layout goes here */
}

@media screen and (orientation: portrait) {
  @-ms-viewport {
    width: 768px;
    height: 1024px;
  }
  /* CSS for portrait layout goes here */
}

Esse exemplo faz essencialmente a mesma coisa que o anterior, só que a orientação em retrato é levada em consideração na segunda regra @media. No caso do modo retrato, a orientação do conteúdo pode mudar (o texto e as imagens podem ser dispostos de maneira diferente para levar em conta a diferença na direção), mas o visor permanece o mesmo. Os valores de largura e altura foram trocados, de forma que a área de conteúdo visível não muda.

Exemplo de uso: otimização em termos da largura

A seguir encontra-se um exemplo de uma página cujo comportamento de dimensionamento foi otimizado em termos da largura usando consultas de mídia e a regra @-ms-viewport. Observe que cada consulta de mídia cobre uma faixa de resolução diferente. Dentro de cada faixa, a regra @-ms-viewport especifica para qual largura devem ser dimensionados os dispositivos que caem nessa faixa. O CSS que se segue a cada regra define exatamente como exibir o conteúdo que foi dimensionado para essa faixa de resolução.


@media screen and (max-width: 400px) {
    @-ms-viewport { width: 320px; }
    /* CSS for 320px layout goes here */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
    @-ms-viewport { width: 400px; }
    /* CSS for 400px layout goes here */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
    @-ms-viewport { width: 640px; }
    /* CSS for 640px layout goes here */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    @-ms-viewport { width: 1024px; }
    /* CSS for 1024px layout goes here */
}

@media screen and (min-width: 1366px) {
    /* CSS for 1366px layout goes here */
}

Exemplo de uso: recusando o dimensionamento automático

Por padrão, o Internet Explorer na nova IU do Windows dimensiona o conteúdo automaticamente quando a janela é mais estreita do que 1.024 pixels. Isso inclui principalmente o estado ajustado e o modo retrato.

Porém, nos casos em que esse dimensionamento automático não é necessário ou desejado, pode-se usar a palavra-chave device-width. Essa palavra-chave significa que a página será otimizada para funcionar direito seja qual for a largura do dispositivo.


@-ms-viewport { width: device-width; }

Ao usar essa palavra-chave, certifique-se de que a página continue a funcionar direito na versão estreita do estado ajustado e do modo retrato.

Referência de API

Device Adaptation

Amostras e tutoriais

Design de sites adaptáveis

Demonstrações do Test Drive do Internet Explorer

Não perca mais tempo!

Postagens no blog do IE

Adaptando seu site para diferentes tamanhos de tela
Levando a Web estável adiante no IE10 Release Preview

Especificação

Adaptação de dispositivos CSS

Tópicos relacionados

Ouvintes e consultas de mídia

 

 

Mostrar:
© 2014 Microsoft