Detectar la resolución de la pantalla y aplicarle estilos

**sasuke.17** · 22-nov-2010

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.

Código PHP:


			
<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í:

Código PHP:


			
div{

color: #006699;

font: 24px Helvetica, Georgia, serif;

}

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

Código PHP:


			
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.

Código PHP:


			
$(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:

Código PHP:


			
$(docment).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)

}



});

**Felina05** · 23-nov-2010

22-nov-2010	#1
sasuke.17 Aprendiendo Ingreso: noviembre-2010 Ubicación: viaja a los rincones que significan algo para ti, allí donde ocurrieron las cosas importantes Mensajes: 88 Sexo: País: Signo: Agradecido: +165	Detectar la resolución de la pantalla y aplicarle estilos 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. Código PHP: `<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í: Código PHP: `div{ color: #006699; font: 24px Helvetica, Georgia, serif; }` Y para la hoja de estilos detect1024.css, insertaremos este código, por ejemplo: Código PHP: `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. Código PHP: `$(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  { 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 :notfirst), así que esto no afectará al primer elemento. La versión adaptada para sitios realizados en Drupal es esta: Código PHP: `$(docment).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) } });` "El hombre es esclavo de sus palabras y dueño de su silencio" "No hay nada más bello que vivir"... R.I.P. Jaime Moreno Garcia

23-nov-2010	#2
Felina05 Erudito Ingreso: julio-2010 Ubicación: Allá lejos.. Mensajes: 2.600 Sexo: Signo: Agradecido: +1.942	"Aprende a interrogar razonablemente, a escuchar con atención, a responder serenamente, y a callar cuando no tengas nada que decir"

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Especial Monitores - Todo lo que hay que saber	Eloy58	PC's Desktops	24	21-jul-2013 21:31
sistema operativo nuevo para netbooks Jolicloud	xhyruja	Sistemas Operativos	8	15-feb-2011 16:55
Mapa DRM W5/W510	Arleanjose	Celulares, PDA & Tecnología Móvil	2	19-sep-2010 19:13
Problemas con la resolucion de pantalla en W7	Shakan3	Windows Vista & 7	8	06-mar-2010 03:51
Como forzar la resolución de pantalla en Windows 7 Ultimate (Original)..?	maxhurbano	Peticiones	2	28-oct-2009 12:47

Los siguientes 2 usuarios agradecen a sasuke.17 por este mensaje:
Felina05 (23-nov-2010), jchierro (24-nov-2010)

(0 miembros y 1 visitantes)