Znaleźć dokładną wysokość i szerokość widoku w trybie wielu przeglądarek (bez Prototype/jQuery)

Question

Próbuję znaleźć dokładną wysokość i szerokość okna przeglądarki, ale podejrzewam, że zarówno Mozilla, jak i IE dają mi niewłaściwą liczbę. Oto moja metoda na wysokości:

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

nie zaczęły jeszcze na szerokości ale zgaduję, że będzie to coś podobnego.

Czy istnieje lepszy sposób uzyskania tych informacji? Idealnie byłoby, gdyby to rozwiązanie działało również z Safari/Chrome/innymi przeglądarkami.

Answer 1

Może spróbuj tego:

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

Jednak nie jest to w ogóle możliwe, aby uzyskać informacje na rzutni w wszystkie przeglądarki (np. IE6 w trybie dziwactwa). Ale powyższy skrypt powinien zrobić dobrą robotę :-)

Answer 2

Zawsze używałem tylko document.documentElement.clientHeight/clientWidth. Nie sądzę, że w tym przypadku potrzebujesz warunków OR.

Answer 3

Użyj tego Tipp: http://www.appelsiini.net/projects/viewport lub że kod: http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

Answer 4

U mogą korzystać z krótszą wersję:

<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

Spróbuj ..

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