I monitor hanno percorso una lunga strada da quando gli utenti di computer visualizzate testo verde sugli schermi monocromatici. siti web di oggi devono accogliere i navigatori che vedono in Internet utilizzando di tutto, dai telefoni cellulari tasca per i monitor di larghezza parecchi piedi. Essere in grado di determinare larghezza del browser del visitatore del sito e la dimensione può aiutare a progettare pagine Web che gli utenti potranno visitare.

Problemi di layout

Immaginate di visitare una pagina Web e dover scorrere tre schermi a destra per visualizzare un menu. Questo può accadere se designer crea una pagina che è troppo grande per il monitor. Un buon modo per assicurarsi che le pagine Web sempre i migliori risultati è quello di personalizzare la larghezza del suo sito web in base alla larghezza del browser del visitatore del sito. È possibile controllare la larghezza dello schermo di un utente, ma non si può fare affidamento su tale larghezza quando si costruisce la pagina Web. Per personalizzare il layout in modo corretto, è necessario esaminare le dimensioni finestra del browser.

Finestre

finestra di un browser è la parte del browser che visualizza il contenuto. Se il browser di un utente è in modalità a schermo intero, la finestra è la dimensione del browser. Tuttavia, se un utente effettua un browser più piccola, la finestra si riduce pure. Ciò potrebbe causare problemi, soprattutto se si dispone di un'applicazione come un gioco che mette gli oggetti in posizioni specifiche dei pixel sullo schermo. Gli utenti non hanno nemmeno bisogno di modificare le dimensioni del browser per interrompere la logica di programmazione. Molti browser, come Firefox, permettono navigatori del Web per aprire i pannelli laterali. Quando ciò accade, i cambiamenti viewport di un browser e la quantità di spazio disponibile diminuisce orizzontali.

Determinazione del browser Larghezza

La seguente riga di codice JavaScript ti dà la larghezza dello schermo disponibile di un browser.

var = browserWidth window.innerWidth || document.body.clientWidth;

Questo codice recupera la larghezza di un browser da entrambi proprietà window.innerWidth o la proprietà body.clientWidth. Il codice memorizza la larghezza in una variabile denominata browserWidth. Il codice ha bisogno di controllare entrambe le proprietà, perché diversi browser possono esporre i loro larghezze viewport in modi diversi. Eseguire questa affermazione quando la pagina carica sul web o eseguirlo ogni volta che gli utenti ridimensionare il proprio browser utilizzando il gestore di eventi window.onresize.

considerazioni

Gli sviluppatori si basano su JavaScript per esaminare le proprietà del browser. Se un navigatore Web disabilita JavaScript, l'applicazione non in grado di rilevare la larghezza del browser. Se conoscere questa larghezza è fondamentale per il vostro disegno, modificare il codice per determinare se è disabilitato JavaScript. Se è così, si può chiedere all'utente di abilitare JavaScript o semplicemente visualizzare la versione più piccola del layout di pagina. Se si sceglie di non rilevare la larghezza del browser, in modo che gli utenti possono comunque scorrere orizzontalmente. A tale scopo, verificando che il valore di overflow CSS della pagina è impostato su "auto".