Finden Sie die genaue Höhe und Breite des Ansichtsfensters in einem Browser-Browser (kein Prototype/jQuery)

Question

Ich versuche, die genaue Höhe und Breite eines Browsers Ansichtsfenster zu finden, aber ich vermute, dass entweder Mozilla oder IE gibt mir die falsche Nummer. Hier ist meine Methode für Höhe:

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

Ich habe noch nicht auf Breite begonnen, aber ich vermute, es ist etwas ähnlich sein wird.

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

Answer 1

Sie könnten versuchen, diese:

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

Allerdings ist es nicht einmal möglich ist, die Darstellungsinformationen zu erhalten in alle Browser (zB IE6 im Quirks-Modus). Aber das obige Skript sollte einen guten Job machen :-)

Answer 2

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

Answer 3

verwenden tipp: http://www.appelsiini.net/projects/viewport oder dass Code: http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

Answer 4

U verwenden können kürzere Version:

<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 5

die Sie interessieren ..

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