Um dos meus vícios quando vou alterar ou criar um tema é não observar se o mesmo está compatível com uma determinada resolução mínima (esqueça o famoso 800×600 por favor).

Um blog para ter um bom design precisa ser no mínimo compatível com a resolução 1024×768, essa que é a maioria utilizada pelos usuários. Como eu utilizo 1400×900 sempre vou fazendo meus ajustes nessa resolução, e no final de todo processo acabo esquecendo de verificar se o layout ficou compatível com a resolução que a maioria dos usuários utiliza.

CSS

CSS

Foi o que ocorreu quando eu alterei o tema do blog, e como muitos já devem ter percebido, o logo está escondido abaixo do conteúdo e não na lateral como é visto em resoluções acima de 1024×768.

Então fiquei pensando numa saída que eu pudesse resolver isso de forma rápida e fácil, acabei achando uma solução demasiada simples que pode ser a saída para muitos problemas:  Vou verificar a resolução do monitor do visitante, e com esses dados eu carrego determinado CSS.

O meio é bem simples, até mais do que eu imaginava e utiliza poucas linhas de código JavaScript, observe abaixo:

<script language=”Javascript1.1″>

function detect() {
if (screen.width == 1024 || screen.height == 768) {
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/CSS_1.css” type=”text/css” media=”screen” />
}
else {
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/CSS_2.css” type=”text/css” media=”screen” />
}
}

O que você precisa fazer é criar um arquivo secundário tendo as alterações necessárias para determinada resolução e jogar o código acima no header do seu tema. Quando o visitante entrar no seu blog o script irá verificar a resolução da tela e automaticamente carregará o arquivo CSS adequado.

O código acima é apenas um exemplo, cada caso é um caso e exige um número determinado de ajustes. Como você pode perceber, apesar de ter encontrado a solução, eu ainda não a implementei.