Detectar la resolución de la pantalla y aplicarle estilos

via CSSBlog ES – ¡CSS 100%! by Pedro CM on 10/7/09


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"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="detect.js"></script> </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) && (screen.height>=768)) { alert('Resolucion: 1024x768 o mayor'); $("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"}); } else&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) } });

Ejemplo de su funcionamiento

Finalmente, podemos ver un ejemplo de su funcionamiento o descargar el ejemplo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: