web-dev-qa-db-fra.com

Trouvez la hauteur et la largeur exactes de la fenêtre d'affichage de manière croisée (pas de prototype / jQuery)

J'essaie de trouver la hauteur et la largeur exactes de la fenêtre d'affichage d'un navigateur, mais je soupçonne que Mozilla ou IE me donne le mauvais numéro. Voici ma méthode pour la hauteur:

var viewportHeight = window.innerHeight || 
                     document.documentElement.clientHeight || 
                     document.body.clientHeight;

Je n'ai pas encore commencé sur la largeur mais je suppose que ça va être quelque chose de similaire.

Existe-t-il un moyen plus correct d'obtenir ces informations? Idéalement, j'aimerais que la solution fonctionne également avec Safari/Chrome/d'autres navigateurs.

javascriptcross-browserviewport
64
Alex Grin

Vous pourriez essayer ceci:

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

( http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ )

Cependant, il n'est même pas possible d'obtenir les informations de la fenêtre d'affichage dans tous les navigateurs (par exemple IE6 en mode excentrique). Mais le script ci-dessus devrait faire du bon travail :-)

87
Leo

Vous pouvez utiliser une version plus courte:

<script type="text/javascript">
<!--
function getViewportSize(){
    var e = window;
    var a = 'inner';
    if (!('innerWidth' in window)){
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>
19
dzona

Je viens toujours d'utiliser document.documentElement.clientHeight/clientWidth. Je ne pense pas que vous ayez besoin des conditions OR dans ce cas.

16
Ben

Essayez ceci ..

<script type="text/javascript">
function ViewPort()
{
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
}
</script>
5
Mathi

Utilisez ce conseil: http://www.appelsiini.net/projects/viewport ou ce code: http://updatepanel.wordpress.com/2009/02/20/getting- the-page-and-viewport-dimensions-using-jquery /

1
powtac