webentwicklung-frage-antwort-db.com.de

Finde die exakte Höhe und Breite des Ansichtsfensters in einer browserübergreifenden Weise (kein Prototype / jQuery)

Ich versuche, die genaue Höhe und Breite des Ansichtsfensters eines Browsers zu ermitteln, aber ich vermute, dass entweder Mozilla oder IE) die falsche Zahl für mich angegeben hat. Hier ist meine Methode für die Höhe:

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

Ich habe noch nicht mit der Weite angefangen, aber ich vermute, dass es etwas Ähnliches sein wird.

Gibt es einen korrekteren Weg, um diese Informationen zu erhalten? Idealerweise möchte ich, dass die Lösung auch mit Safari/Chrome/anderen Browsern funktioniert.

javascriptcross-browserviewport
64
Alex Grin

Sie könnten dies versuchen:

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/ )

Es ist jedoch nicht einmal möglich, die Ansichtsfensterinformationen in allen Browsern abzurufen (z. B. IE6 im Quirks-Modus). Aber das obige Skript sollte einen guten Job machen :-)

87
Leo

Sie können eine kürzere Version verwenden:

<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

Ich habe immer nur document.documentElement.clientHeight/clientWidth. Ich glaube nicht, dass Sie in diesem Fall die OR Bedingungen benötigen.

16
Ben

Versuchen Sie dies ..

<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

Verwenden Sie diesen Tipp: http://www.appelsiini.net/projects/viewport oder diesen Code: http://updatepanel.wordpress.com/2009/02/20/getting- die-Seite-und-Ansichtsfenster-Dimensionen-mit-jquery /

1
powtac