Risoluzioni dello schermo popolari: Progettare per tutti

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 360 x 640 Tablets Nexus 9 1536 x 2048 768 x 1024 Nexus 7 (2013) 1200 x 1920 600 x 960 Pixel C 1800 x 2560 900 x 1280 Samsung Galaxy Tab 10 800 x 1280 800 x 1280 Chromebook Pixel 2560 x 1700 1280 x 850

Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Condividi con noi su Facebook!

Leave a Comment