Media-queries avec jQuery ?

sarahhh

21 Jul 2011 à 17:43

Bonjour à tous!!!

J'utilise media-queries pour charger une feuille css quand la hauteur de l'écran est inférieure à 600px.

<link rel="stylesheet" media="screen and (max-height: 600px)" href="ecranpetit.css" type="text/css" />

Ca marche nickel sur tous les navigateurs modernes... sauf les sempiternels Internet Explorer et autres qui ne gèrent pas le CSS3.
J'ai donc trouvé des librairies JS (jQuery a ma préférence) :
http://blog.johanbleuzen.fr/responsive-design-pour-tous
Je pense que ce petit lien fera plaisir à beaucoup d'entre vous!

J'étais contente moi aussi jusqu'à que je me rende compte que la variable height n'est gérée par aucun de ces plugins.
Comment pourrais-je écrire manuellement un script jQuery qui dirait : si hauteur de l'écran < 600px, charger ecranpetit.css ?

Merci par avance Smiley smile

Modifié par sarahhh (21 Jul 2011 - 18:16)

ZeB_panam

23 Jul 2011 à 12:47

La solution serait plutôt : si l'écran est inférieur à 600px, je rajoute une classe au body :


$(function() { 
	
	var windowHeight= $(window).height();
	if(windowHeight < 600){
		$("body").addClass("inf600");
	}
	   
});

Et niveau css :


.classeExemple{
	/* règles à appliquer pour .classExemple dans le cas où la hauteur est supérieure à 600px */
}
.inf600 .classeExemple{
	/* règles qui écraseront les règles précédentes dans le cas où la hauteur est inférieure à 600px */
}

Sinon, il existe des plugs-in pour les mobiles, à savoir jQuery mobile, ou encore jQTouch
Modifié par ZeB_panam (23 Jul 2011 - 12:49)