Trouver la hauteur et de la largeur de la fenêtre d'affichage dans une manière de croix-navigateur (pas de Prototype/jQuery)

Question

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

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

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

Est-il un plus bonne façon d'obtenir cette information? Idéalement, j'aimerais que la solution fonctionne avec Safari/Chrome/autres navigateurs aussi bien.

Answer 1

Vous pouvez 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 la fenêtre d'affichage de l'information dans tous les navigateurs (par exemple, IE6 en mode quirks). Mais le script ci-dessus devrait faire un bon travail :-)

Answer 2

U peut utiliser la version plus courte:

<script type="text/javascript">
<!--
function viewport(){
    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>

Answer 3

J'ai toujours utilisé le document.documentElement.clientHeight/clientWidth. Je ne pense pas que vous avez besoin de la OU des conditions dans ce cas.

Answer 4

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>

Answer 5

L'utilisation de cette tipp: http://www.appelsiini.net/projects/viewport ou le code: http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/