Il est possible que vous ayez besoin d’adapter votre site en fonction de la taille du navigateur du client. Nous allons donc voir comment faire cette manipulation avec une image qui s’adapte à la taille du navigateur, le tout grâce à jQuery.

Pour ce faire, nous allons créer une fonction adjustSize() que nous appellerons dès que la page sera chargée.

// Initialise le site par rapport au navigateur
$(function() {
	adjustSize();
});

Jusque là, rien de bien compliqué. Pour que la fonction soit utile, nous avons besoin de récupérer la hauteur et la largeur du navigateur. Le problème étant que les navigateurs ne sont pas tous sur la même longueur d’ondes (qui a dit IE ?). Encore et toujours le même, Internet Explorer (du 6 au 8) ne connait pas self.innerWidth et son homologue self.innerHeight. De ce fait il faut passer par une petite condition pour contourner ce problème.

/* FONCTION QUI AJUSTE LE SITE AU NAVIGATEUR */
function adjustSize() {
	// Initialisation des variables pour la taille de la fenêtre
	var navWidth, navHeight;
	if (self.innerWidth != undefined)
	{
		navWidth = self.innerWidth;
		navHeight = self.innerHeight;
	} else {
		navWidth = document.documentElement.clientWidth;
		navHeight = document.documentElement.clientHeight;
	}
}

Voilà la base du script ! Pour la suite nous allons utiliser une image qui s’adaptera donc au navigateur (pas franchement d’intérêt, c’est vraiment pour l’exemple). J’ai hésiter longuement entre un de mes tags sur CS:S (comprendra qui pourra) mais finalement j’ai pris une simple image d’un artiste que j’aime beaucoup, Grum. Comme je suis sympa je vous met le code HTML :

<img src="grum.jpg" alt="Grum" />

Ce tutoriel semble arrivé à la fin, il ne reste plus qu’à adapter l’image au navigateur grâce aux variable navWidth et navHeight crées précédemment :

/* FONCTION QUI AJUSTE LE SITE AU NAVIGATEUR */
function adjustSize() {
	// Initialisation des variables pour la taille de la fenêtre
	var navWidth, navHeight;
	if (self.innerWidth != undefined)
	{
		navWidth = self.innerWidth;
		navHeight = self.innerHeight;
	} else {
		navWidth = document.documentElement.clientWidth;
		navHeight = document.documentElement.clientHeight;
	}

	// Mise-à-jour des divs principaux (avec la bonne taille tailles)
	$("img").css({
		"width": navWidth,
		"height": navHeight
	});
}

Et voilà, une bien belle image tout étiré comme il faut :). L’image est bien aux dimensions du navigateur mais il reste une petite chose à faire. En effet, lorsque vous redimensionnez votre navigateur l’image ne suit pas. On pourrai penser que la méthode resize() de jQuery pourrait faire l’affaire mais il y a encore quelques subtilités parmi les navigateurs. Firefox va redimensionner l’image par à-coup alors que Webkit (Chrome et Safari) et IE le font instantanément. La méthode resize() pour l’exemple proposé dans ce tutoriel suffit, mais si vous avez d’autres parties de votre site à adapter, il se peut que ça rame sec sur IE. Pour pallier ce problème, j’utilise la fonction smartresize de Paul Irish qui permet à IE et Webkit d’attendre que l’utilisateur est redimensionner sa page pour fonctionner (un exemple est disponible ici). Concrètement ça donne ça :

// Fonction appelé lorsque le navigateur change de résolution
$(window).smartresize(function(){
	adjustSize();
});

Félicitation, vous avez réussi mon tutoriel \o/
N’hésitez pas à nous montrer vos réalisations faites avec nos tutos ;)