Qual è la finestra?
La finestra è area visibile da parte dell'utente di una pagina web.
La finestra varia con il dispositivo, e sarà più piccolo su un telefono cellulare che sullo schermo del computer.
Prima di tablet e telefoni cellulari, le pagine web sono stati progettati solo per schermi di computer, ed era comune per le pagine web di avere una progettazione statica e una dimensione fissa.
Poi, quando abbiamo iniziato la navigazione in internet utilizzando tablet e telefoni cellulari, dimensione fissa le pagine web erano troppo grandi per adattarsi alla finestra. Per risolvere questo problema, i browser su tali dispositivi in scala verso il basso l'intera pagina web per adattarsi allo schermo.
Questo non è stato perfetto !! Ma una soluzione rapida.
Impostazione la finestra
HTML5 ha introdotto un metodo per consentire web designer prendere il controllo sopra la finestra, attraverso la <meta> tag.
Si dovrebbe includere le seguenti <meta> elemento viewport in tutte le pagine web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Un <meta> elemento viewport fornisce le istruzioni del browser su come controllare le dimensioni e il ridimensionamento della pagina.
Il width=device-width parte imposta la larghezza della pagina a seguire lo schermo-larghezza del dispositivo (che variano a seconda del dispositivo).
La initial-scale=1.0 parte imposta il livello di zoom iniziale quando la pagina viene caricata prima dal browser.
Ecco un esempio di una pagina web senza il meta tag viewport, e la stessa pagina web con la finestra meta tag:
Suggerimento: se si sta navigando questa pagina con un telefono cellulare o un tablet, è possibile fare clic sui due link per vedere la differenza.
Dimensioni Contenuto al viewport
Gli utenti vengono utilizzati per scorrere i siti web in verticale sul desktop e dispositivi mobili - ma non in senso orizzontale!
Quindi, se l'utente è costretto a scorrere in orizzontale, o diminuire, per vedere l'intera pagina web si traduce in una scarsa esperienza degli utenti.
Alcune regole aggiuntive da seguire:
1. Non utilizzare grandi elementi larghezza fissa - Per esempio, se l'immagine viene visualizzata con una larghezza più ampia della finestra può causare la finestra per scorrere in orizzontale. Ricordarsi di regolare questi contenuti per adattarsi all'interno della larghezza della finestra.
2. Non lasciate che il contenuto si basa su una particolare larghezza di finestra a rendere bene - Dal momento che le dimensioni dello schermo e la larghezza in pixel CSS variano ampiamente tra i dispositivi, il contenuto non dovrebbe fare affidamento su una particolare larghezza di finestra a rendere bene.
3. Usare CSS di media query di applicare uno stile diverso per le piccole e grandi schermi - Impostazione grandi larghezze CSS assoluti per gli elementi della pagina, farà sì che l'elemento di essere troppo ampio per la finestra su un dispositivo più piccolo. Invece, considerare l'utilizzo di valori di larghezza relativi, come la larghezza: 100%. Inoltre, fare attenzione di utilizzare grandi valori di posizionamento assoluto. Ciò potrebbe causare l'elemento a cadere al di fuori della finestra su dispositivi di piccole dimensioni.