detectar la anchura de la ventana y compensar las barras de desplazamiento - Javascript

Question

¿Cómo puedo detectar el ancho de la ventana de un usuario con Javascript y dar cuenta de su barra de desplazamiento? (Necesito la anchura del interior de la pantalla de la barra de desplazamiento). Aquí es lo que tengo ... que parece que funciona en varios navegadores ... excepto que no tiene en cuenta las barras de desplazamiento ..

    function browserWidth() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && document.documentElement.clientWidth ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && document.body.clientWidth ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

alguna idea? necesito que funcione en todos los navegadores;)

Answer 1

Usted encontrará la gran resumen de lo que las propiedades son compatibles con lo que los navegadores en esta página en quirksmode. org .

Su mejor apuesta es probablemente para agarrar un elemento en la página (usando document.body donde compatibles, o document.getElementById o lo que sea), a pie su cadena offsetParent para encontrar el elemento superior, a continuación, examinar clientWidth de ese elemento y clientHeight.

Answer 2

A (notablemente desagradable) solución si está interesado sólo en el ancho es crear un div 1px x 100% y utilizar su offsetWidth. Funciona en IE> = 7, FF, Chrome, Safari y Opera (no he probado IE6, ya que estamos trabajando para unos estás-suerte-it-obras-en-todo-tan-no-se quejan aproximadamente de política en estos días) rarezas -alrededor de representación. Cuelgo el div fuera document.body con atributos { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, creando la primera vez que sea necesario.

funciona si puedes estómago.

Answer 3

Sólo tiene que añadir que antes de la window.innerWidth () controlar:

if (typeof(document.body.clientWidth) == 'number') {
    // newest gen browsers
    width = document.body.clientWidth;
    height = document.body.clientHeight;
}

Answer 4

Esto es lo que hice - sólo la mitad de un año en el aprendizaje de JavaScript, por lo que esta puede ser una mala solución. En primer lugar, he creado una imagen cuadrada (10px x 10px) transparente, pero también se puede crear una imagen no transparente y añadir esto a su JavaScript como
document.getElementById('getDimensions').style.visibility = "hidden";

HTML:

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image  
meant to determine the dimensions of the viewport" width="10px" height="10px"/>

JavaScript:

//Inside function called by window.onload event handler (could go in CSS file, but   
//better to keep it with other related code in JS file)
document.getElementById('getDimensions').style.position = "fixed";
document.getElementById('getDimensions').style.bottom = "0px";
document.getElementById('getDimensions').style.right = "0px";   

//Everything below inside function called by window.onresize event handler
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft;
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop;
  //Account for the dimensions of the square img element (10x10)
var viewportWidth = baseWidthCalculation + 10;
var viewportHeight = baseHeightCalculation + 10;

Answer 5

Esta es una versión más eficiente de una idea publicado aquí por Tim Salai (a pesar de que apenas está comenzando, que era genial para colocar un elemento en la esquina inferior derecha de esa manera).

var getDimensions = document.createElement("div");
getDimensions.setAttribute("style", 
            "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var viewportWidth = getDimensions.offsetLeft;
var viewportHeight = getDimensions.offsetTop;

Y aquí es una versión modular

var PageDimensions = function(){
 var Width;
 var Height;     

 function pagedimensionsCtor (){
   var getDimensions = document.createElement("div");
   getDimensions.setAttribute("style" , 
         "visibility:hidden;position:fixed;bottom:0px;right:0px;");
   document.getElementsByTagName("body")[0].appendChild(getDimensions);
   Width = getDimensions.offsetLeft;
   Height = getDimensions.offsetTop;
   getDimensions.parentNode.removeChild(getDimensions);
 }
 pagedimensionsCtor();

 function Reset(){
  pagedimensionsCtor();
 }     

 function GetPageHeight(){
  return Height;
 }

 function GetPageWidth(){
  return Width;
 }

 return{
  Reset: Reset,
  GetPageHeight: GetPageHeight,
  GetPageWidth: GetPageWidth
 };
}

Utilice la versión modular:

var page = new PageDimensions();
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight());

de bonificación:

page.Reset();//just in case you think your dimensions have changed

Answer 6

Me gustaría comparar el "innerWidth" a la anchura del cuerpo. Si el ancho del cuerpo> innerWidth, a continuación, las barras de desplazamiento están presentes.

if (browserWidth() < document.body.offsetWidth) {
  doSomething();
}

Answer 7

Otra solución puede probar que está cambiando un poco de CSS por lo que el desplazamiento ocurre dentro de su página, en lugar de la ventana del navegador haciéndolo. En el estilo de cuerpo, agregar overflow: auto. Ahora el elemento del cuerpo incluye la barra de desplazamiento, por lo que cuando se obtiene el ancho de la ventana que está midiendo la anchura exterior del contenedor en lugar de desplazarse en su interior.

Esto se siente como una fuente potencial de rareza, y posiblemente un problema de accesibilidad, así que si vas para su uso generalizado es posible que desee probarlo con mucho cuidado.