Detectar la resolución de la pantalla y aplicarle estilos

detectar-resolucion-estilos

Quizás alguna vez hemos tenido la necesidad de aplicar estilos según la resolución de la página. En esta entrada aprenderemos como detectar dicha resolución y aplicarle estilos, gracias a Javascript.

El primer paso será cargar las hojas de estilo, la librería JQuery y nuestro código Javascript.

<link rel="stylesheet" type="text/css" href="reset.css"/>

<link rel="stylesheet" type="text/css" href="detect800.css"/>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22detect.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" />

</head>

<body>


<div>El color de este texto es variable.</div>


</body>

Vamos a detectar si la resolución del usuario es menor que 1024 x 768 píxeles. Si lo es, cambiaremos la hoja de estilos.

Como dije, crearemos 2 hojas de estilos, una llamada detect800.css, y otra detect1024.css, para las resoluciones 800 x 600 y 1024 x 768, respectivamente.

Por ejemplo, para la hoja de estilos detect800.css puede ser algo así:

div{

color: #006699;

font: 24px Helvetica, Georgia, serif;

}

Y para la hoja de estilos detect1024.css, insertaremos este código, por ejemplo:

div{

color: #006cff;

font: 22px "Trebuchet MS", sans-serif;

}

Detectando la resolución de la pantalla

Añadiremos una alerta Javascript que hará una pausa hasta que hagamos click en OK y consigamos ver el estilo anterior.

$(document).ready(function() {
if ((screen.width>=1024) &amp;amp;&amp;amp; (screen.height>=768)) {
alert('Resolucion: 1024x768 o mayor');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else&amp;amp;nbsp; {
alert('Resolucion: Menos de 1024x768, a lo mejor es 800x600');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});

Asociaremos las 2 resoluciones a sus respectivos estilos, redirigiendo su dirección a otra hoja de estilos distinta. Ahora, desde que se está cargando reset.css en primer lugar, se añadirá el modificador :not(:first), así que esto no afectará al primer elemento.

La versión adaptada para sitios realizados en Drupal es esta:

$(document).ready(function() {

if ((screen.width<=1024)) {

filename="sites/all/themes/mytheme/1024.css"

var fileref=document.createElement("link")

fileref.setAttribute("rel", "stylesheet")

fileref.setAttribute("type", "text/css")

fileref.setAttribute("href", filename)

document.getElementsByTagName("head")[0].appendChild(fileref)

}

});