Largura de Media Query e Barras de Rolagem

Entenda como a especificação das Media Queries nem sempre corresponde ao funcionamento real em diferentes browsers.

Media Queries são uma grande ferramenta para modificar o layout de um site dependendo da largura da tela (ou da janela do navegador), mas pode ser perturbador quando os browsers não se comportam da mesma maneira. Um exemplo óbvio é se a barra vertical de rolagem entra ou não na conta da largura da janela.

Na especificação das Media Queries está assim

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

ou seja, a regra é clara: segundo a especificação a medida da largura deve incluir o tamanho de uma barra de rolagem (se houver uma).  Logo, todos os browsers deveriam se comportar da mesma forma, mas na realidade isso varia. Não depende apenas do browser ou do sistema operacional, mas também das configurações do usuário.

Existem três comportamentos distintos:

Barra de rolagem incluída na largura da media query

Muitos browsers desktop incluem a barra de rolagem no calculo da largura Firefox, Opera, e Internet Explorer por exemplo fazem.

Barra de rolagem NÃO incluída na largura da media query

Versões desktop do Chrome, Safari, e outros browsers WebKit não incluem as barras de rolagem no cálculo da largura das media queries. Na verdade é um pouco mais complicado do que isso, como explicarei em seguida.

Barra de rolagem incluída na largura da media query, porém sem afetar a largura do conteúdo

No Mac OS X 10.7 e superiores há uma configuraçãode preferências que exibe barras de rolagem apenas quando se estar rolando a página. Com essa opção selecionada, os browsers WebKit incluem a barra de rolagem na media query mas apenas exibe a barra de rolagem durante a rolagem! E então mostram-na em cima do conteúdo em vez de ao lado dele. Por causa disso, a área disponível da janela ainda fica uma barra de rolagem mais larga do que em outros browsers.

Isso também é o que muitos browsers mobile fazem (vários dispositivos iOS devices, Opera Mobile, Android 2.3.3 e 4.1.2)

Se isso vai contra a Especificação das Media Queries, não sei. A barra de rolagem é incluída na largura, apesar de tudo, mas me pergunto se isso é algo que o CSS Working Group pensou quando produziu a especificação.

Normalmente não é um problema, mas poderia ser

Então como isso lhe afeta, como desenvolvedor web? Na maior parte das vezes esta diferença não é grande coisa para desenvolvedores web e pode nem ser aparente. Mas se você usar parâmetros fixos com larguras fixas de layout e/ou tiver conteúdo que possui uma largura intrínseca e requer parâmetros medidos com exatidão de pixels, você deve levar em conta esta diferença. A melhor forma de lidar com isso é fazer seu layout e conteúdo serem flexíveis para que esta diferença não importe muito. Ou, se preferir defina suas media queries para se ativarem em larguras um pouco maiores.

E qual seria a melhor forma? Talvez você possa incluir um teste de comportamento da barra de rolagem na Media Query, maisou menos assim:

Mas para que este método seja útil vc precisa saber a largura de uma barra de rolagem (o que depende do sistema operacional) quando esta não é renderizada em cima da área de conteúdo. Sendo assim, não tenho certeza se isto ajudaria muito.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">