Nel mondo di oggi, ci sono una pletora di dispositivi tra cui scegliere e può essere scoraggiante cercare di ospitare e costruire per le migliori esperienze su tutti i dispositivi. Tuttavia, è importante rimanere aggiornati con le dimensioni e le risoluzioni dello schermo più popolari durante la progettazione di siti Web e mobili. Un sito ottimizzato e reattivo consente un flusso di utenti più semplice e, in definitiva, un’esperienza piacevole per il tuo pubblico.,
Dimensioni dello schermo, risoluzione e Viewport: cosa significa tutto questo?
Quando acquisti un dispositivo, vedrai spesso sia le dimensioni dello schermo che la risoluzione elencate nelle specifiche. Lo screensize è la misura fisica in diagonale dello schermo in pollici. Questo non deve essere confuso con la risoluzione, che è il numero di pixel sullo schermo spesso visualizzato come larghezza per altezza (cioè 1024×768). Poiché i dispositivi con le stesse dimensioni dello schermo possono avere risoluzioni molto diverse, gli sviluppatori utilizzano le finestre quando creano pagine compatibili con i dispositivi mobili., Le finestre sono versioni ridotte di risoluzioni che consentono di visualizzare i siti in modo più coerente su dispositivi diversi. Le finestre sono spesso più standardizzate e più piccole delle dimensioni della risoluzione.
Mentre i display desktop e laptop sono orientati in orizzontale (più larghi che alti), molti dispositivi mobili possono essere ruotati per mostrare i siti Web sia in orizzontale che in verticale (più alti che larghi). Ciò significa che i progettisti e gli sviluppatori devono progettare per queste differenze.
Hai bisogno di aiuto per determinare se il tuo sito web è reattivo? Usa il nostro strumento gratuito MG, Responsive Design Checker.,
Mentre i display desktop e laptop sono orientati in orizzontale (più larghi che alti), molti dispositivi mobili possono essere ruotati per mostrare i siti Web sia in orizzontale che in verticale (più alti che larghi). Ciò significa che i progettisti e gli sviluppatori devono progettare per queste differenze.
Responsive Styling
Sarebbe quasi impossibile per le aziende di progettare per ogni singolo dispositivo. Invece, quando si programmano progetti reattivi, gli sviluppatori spesso:
- Raggruppano lo stile nelle dimensioni del dispositivo più tipiche per telefoni, tablet e desktop., In questo caso, qualsiasi cosa più grande di 7 pollici viene solitamente visualizzata a risoluzione desktop o-
- Usa i punti di interruzione (larghezze di pixel definite che il display regolerà il layout in base alle dimensioni dello schermo) in base al design e al layout
A volte, uno sviluppatore potrebbe scegliere di combinare entrambi i metodi se lo Si consiglia di iniziare raggruppando le dimensioni tipiche del dispositivo.
Se sei uno sviluppatore e stai cercando di generare gli stili necessari per gestire lo stile mobile o reattivo, di seguito abbiamo incluso un frammento di CSS che potrebbe aiutare.,d solo essere utilizzato come una guida per iniziare:
/* start of desktop styles */
@media screen and (max-width: 991px) {
/* inizio del grande tablet stili */
}
@media screen and (max-width: 767px) {
/* inizio di media tablet stili */
}
@media screen and (max-width: 479px) {
/* inizio di telefono stili */
}
Più Popolari Risoluzioni dello Schermo
Sapendo che è la chiave per ospitare i diversi dispositivi durante la progettazione di siti web, abbiamo compilato una lista dei più up-to-data di dispositivi con le loro rispettive dimensioni di pixel e finestre in seguito., Abbiamo anche messo queste informazioni in un pratico PDF scaricabile.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Condividi con noi su Facebook!