window.innerWidth = 0?

Sto creando una pagina Web canvas per l'animazione. Stranamente, ogni volta che lancio la pagina Web facendo doppio clic sul file html, la tela avrà quasi sempre una dimensione errata. Ho postato una domanda simile prima: Canvas sizing incorrectly on loading ma non ho una risposta desiderata.window.innerWidth = 0?

Dopo un debug completo, scopro che è lo window.innerWidth a provocarmi problemi. Lo window.innerWidth restituisce 0 ogni volta che la pagina viene avviata facendo doppio clic sul file html e restituisce una dimensione non corretta della tela (è interessante notare che la dimensione della tela non è esattamente 0, ma molto piccola con oggetti da impilare uno sopra l'altro), ma dopo aver ricaricato la pagina (Ctrl + R) il problema non si verifica più. Sto utilizzando jQuery per caricare la pagina, qui è il mio codice:

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'); 
      } 
     } 
});

Come si può vedere qui, sto già utilizzando $(docuemnt).ready(function()) a assicurati che le cose vengano caricate, tuttavia da un link http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/ l'autore suggerisce che l'evento pronto per il documento viene eseguito già quando il documento HTML è caricato e il DOM è pronto, anche se tutti i grafici non sono ancora stati caricati.

D'altra parte lo $(window).load(function()) viene eseguito un po 'più tardi quando la pagina completa è completamente caricata, inclusi tutti i frame, gli oggetti e le immagini. Pertanto le funzioni che riguardano le immagini o altri contenuti della pagina devono essere collocate nell'evento load per la finestra o il tag di contenuto stesso. Ma anche io lo uso, il problema non è risolto.

Forse il file js richiede la larghezza della finestra prima che venga caricato, ma non riesco a trovare una soluzione valida. Qualcuno può aiutare con questo?

fonte

2012-07-30 ryf9059

'innerWidth' è una proprietà window/frame ed è disponibile anche prima che qualcosa fosse caricato, ma anche in un documento vuoto. Quale browser stai usando per vedere questo problema? Direi che è un bug. ' 'stampe 1920, che è la larghezza del mio schermo ... – feeela

@feeela Sto usando chrome e ho questo problema. Il tag dello script che metti le impronte 0 per me, ma indovina cosa? Dopo che stampa 0 e il problema scompare e 'alert (" wtf? Width = 0? ");' Non viene visualizzato anche se è già stato stampato 0, ma se rimuovo questo tag script accade lo stesso – ryf9059

-1

Ho avuto un problema simile con window.outerWidth che restituisce 0 su alcuni browser quando chiamato dal metodo ready() e ho risolto utilizzando screen.width invece. Non l'ho provato ma penso che lo screen.availWidth risolverebbe il tuo problema.

fonte

2012-07-30 12:41:39

Ancora suoni come un bug del browser ... – feeela

@feeela dove dovrei segnalarlo? – ryf9059

window.outerWidth e screen.width misurano due cose diverse: la larghezza della finestra del browser e la larghezza dell'intero schermo. Allo stesso modo window.innerWidth e screen.availWidth non sono la stessa cosa. – mikemaccana

Utilizzare un listener di eventi che si attiva in un ridimensionamento della finestra. In questo modo non devi fare sciocchezze con il tentativo di trovare quando la finestra si inizializza completamente. Ti renderà anche meno dipendente dallo stato che è un bel bonus.

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

fonte

2016-01-11 23:38:08 Joseph

window.innerWidth = 0?

risposta

Problemi correlati