Como determinar el ancho del browser

helena71 · #1 (**permalink**) 15/04/2013, 17:57

Me voy a volver loca, estoy tratando de conocer las dimensiones de la pantalla para centrar unos elementos pero a sido imposible.

Se supone que window.innerWidth es para FF y document.body.clientWidth para IE

Estoy usando este código pero no me funciona siempre, con unas versiones de browser me funciona pero con otras no.

Código HTML:

Ver originalif (window.innerWidth){ 
   ventana.style.marginLeft = (window.innerWidth) + "px";
}else{
   ventana.style.marginLeft = (document.body.clientWidth) + "px";
}

Que función debo usar para Chrome?

Me dan una manito por favor?

Gracias

emprear · #2 (**permalink**) 15/04/2013, 19:20

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<script type="text/javascript">
//<![CDATA[
function medidas(){
var winW,winH;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
 
 
document.getElementById('ancho').innerHTML = winW;
document.getElementById('alto').innerHTML = winH;
}
//]]>
</script>
 
</head>
<body onload="medidas();" onresize="medidas();">
<div>Ancho: <span id="ancho"></span></div>
<div>Alto: <span id="alto"></span></div>
</body>
</html>

Saludos

helena71 · #3 (**permalink**) 16/04/2013, 19:25

emprear, lo que yo tenia era algo muy basico, lo tuyo es muy elaborado, lo estuve probando en varios browser y funciona muy bien. Gracias

Una duda, tu colocaste una linea (<title>Html5</title>) esta hecho en HTML5?

Nuevamente gracias

emprear · #4 (**permalink**) 16/04/2013, 19:37

Cita:

Iniciado por helena71

emprear, lo que yo tenia era algo muy basico, lo tuyo es muy elaborado, lo estuve probando en varios browser y funciona muy bien. Gracias

Una duda, tu colocaste una linea (<title>Html5</title>) esta hecho en HTML5?

Nuevamente gracias

Si, pero de hecho solo tiene el Doctype de html5, no hay ningún elemento específico de html5, podría ser html, ó xhtml, pero no modificaría para nada el uso e implementación del javascript.
Saludos