window.innerWidth = 0?

Estoy haciendo una página web de lienzo para la animación. Lo extraño es que cada vez que abro la página web al hacer doble clic en el archivo html, el lienzo casi siempre tendrá el tamaño incorrecto. He publicado una pregunta similar antes: Canvas sizing incorrectly on loading pero no tengo la respuesta deseada.window.innerWidth = 0?

Después de una depuración exhaustiva descubrí que es el window.innerWidth el que me causa tantos problemas. El window.innerWidth devuelve 0 cada vez que se inicia la página al hacer doble clic en el archivo html y resulta en un tamaño de lienzo incorrecto (curiosamente, el tamaño del lienzo no es exactamente 0, pero uno muy pequeño que tiene un objeto para ser apilado uno encima del otro), pero después de volver a cargar la página (Ctrl + R) el problema ya no ocurre. Estoy usando jQuery para cargar la página, aquí está mi código:

html:

<body> 
     <canvas id="main_canvas"></canvas> 
    </body>

JS:

$(document).ready(function() { 

     var SCREEN_WIDTH = window.innerWidth-10, 
      SCREEN_HEIGHT = window.innerHeight-10; 

     if (window.innerWidth === 0) { alert("wtf? width = 0?");} 

     var canvas = $('canvas')[0], 
      context; 

     init(); // use $(window).load(init) does not fix the problem 

     function init() { 

      if (canvas.getContext) { 

       context = canvas.getContext('2d'); 
     animate(); // draw stuff 
      } 

      else { 
       alert('Your browser does not support html5 canvas'); 
      } 
     } 
});

Como se puede ver aquí, ya estoy usando $(docuemnt).ready(function()) a asegúrese de que las cosas se carguen; sin embargo, desde un enlace http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/, el autor sugiere que el evento listo para el documento ya se ejecuta cuando se carga el documento HTML y el DOM está listo, incluso si todos los gráficos no se han cargado aún.

Por otro lado, el $(window).load(function()) se ejecuta un poco más tarde cuando la página completa está completamente cargada, incluidos todos los marcos, objetos e imágenes. Por lo tanto, las funciones que conciernen a imágenes u otros contenidos de la página deben colocarse en el evento de carga para la ventana o la etiqueta de contenido en sí. Pero incluso yo uso esto, el problema no está resuelto.

Quizás el archivo js pida el ancho de la ventana antes de que se cargue, pero no puedo encontrar una solución viable. ¿Alguien puede ayudarme con esto?

Fuente

2012-07-30 ryf9059

El 'innerWidth' es una propiedad de la ventana/marco y está disponible incluso antes de que algo se cargó - sin embargo, incluso en un documento vacío. ¿Qué navegador estás usando para ver este problema? Yo diría que es un error. ' 'imprime 1920, que es el ancho de mis pantallas ... – feeela

@feeela Estoy usando Chrome y tengo este problema. La etiqueta de script que me das imprime 0, pero ¿adivina qué? Después de que imprime 0 y el problema desaparece y la 'alerta (" wtf? Width = 0? ");' No aparece incluso si se imprimió previamente 0, pero si elimino esta etiqueta del script sucede lo mismo – ryf9059

-1

Tuve un problema similar con window.outerWidth que está retornando 0 en algunos navegadores cuando se llama desde el método ready(), y lo resolví usando screen.width. No lo probé pero creo que screen.availWidth resolvería su problema.

Fuente

2012-07-30 12:41:39

Todavía suena como un error del navegador ... – feeela

@feeela ¿dónde debería informarlo? – ryf9059

window.outerWidth y screen.width miden dos cosas diferentes: el ancho de la ventana de su navegador y el ancho de toda su pantalla. Del mismo modo, window.innerWidth y screen.availWidth no son lo mismo. – mikemaccana

Use un detector de eventos que se desencadena en un tamaño de ventana. De esta forma, no tiene que hacer tonterías para tratar de encontrar cuándo la ventana se inicializa por completo. También te hará menos dependiente del estado, lo cual es una buena bonificación.

window.addEventListener('resize', onWindowResize, false); 
function onWindowResize() { 
    windowX = window.innerWidth; 
    windowY = window.innerHeight; 
}

Fuente

2016-01-11 23:38:08 Joseph

window.innerWidth = 0?

Respuesta

Cuestiones relacionadas