Une formule magique pour calculer la largeur du viewport

Bonjour,

j'ai trouvé cette fonction sur le net pour calculer les dimensions du viewport quelque soit le navigateur.

Elle me permet d'afficher la taille de la fenêtre lors de mes essais en fluid-responsive-design.

Par contre je comprend rien à cette fonction... quelqu'un pourrait il nous expliquer ce qu'elle fait?

merci

function viewport() {
	var e = window, a = 'inner';
	if (!('innerWidth' in window )) {
		a = 'client';
		e = document.documentElement || document.body;
	}
	return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
	}

Modifié par lionel_css3 (16 Aug 2013 - 10:14)

Elle récupère la largeur intérieure de soit l'objet window, soit du document. En plus verbeux, ca donne ca:

if (window.innerWidth != undefined){//en vrai cette ligne elle fais probablement une erreur, mais c'est pour le principe
    return {
         width: window.innerWidth,
         height: window.innerHeight,
    };
}
else{
    var doc = document.documentElement || document.body;//les 2 reviennent à peu près au meme
    return {
         width: doc.clientWidth,
         height: doc.clientHeight,
    };
}

window.innerWidth/Height renvoi la taille de la fenêtre en incluant les scrollbars si il y en a. documentElement.clientWidth/Height renvoi la taille de la fenêtre sans inclure les scrollbars. A toi de voir ce dont tu as besoin.

document/body.clientWidth/Height n'a aucun intérêt à l'heure actuelle pour mesurer la taille de la fenêtre car tous les navigateurs supportent documentElement.clientWidth/Height.

En gros avec documentElement.client tu lis vraiment la taille du viewport tandis qu'avec window.inner* tu lis la taille de la fenêtre.
Modifié par jb_gfx (16 Aug 2013 - 22:54)