Encuentre la altura y el ancho exactos de la ventana gráfica en una forma de navegador cruzado

Question 1

Estoy tratando de encontrar la altura y el ancho exactos de la ventana gráfica de un navegador, pero sospecho que Mozilla o IE me están dando el número incorrecto. Aquí está mi método para la altura:

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

Todavía no he comenzado con el ancho, pero supongo que será algo similar.

¿Hay una forma más correcta de obtener esta información? Idealmente, me gustaría que la solución también funcione con Safari/Chrome/otros navegadores.

Question 2

Puedes intentar esto:

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

Sin embargo, ni siquiera es posible obtener la información de la ventana gráfica en todos los navegadores (por ejemplo, IE6 en modo peculiar). Pero el script anterior debería hacer un buen trabajo 🙂

Question 3

Puede usar una versión más corta:

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

Question 4

Siempre he usado document.documentElement.clientHeight/clientWidth. No creo que necesites las condiciones OR en este caso.

Question 5

Prueba esto..

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

Question 6

Usa este consejo: http://www.appelsiini.net/projects/viewport o ese código: http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

¿Ha sido útil esta solución?