Dimensioni dello schermo del telefono per i modelli più popolari

Nel mondo di oggi, ci sono molti dispositivi tra cui le persone possono scegliere, e può essere scoraggiante se si cerca di mettere e costruire per la migliore esperienza su tutti i dispositivi. Tuttavia, quando si progettano siti web e dispositivi mobili, è importante essere consapevoli delle dimensioni dello schermo del telefono più popolari e le risoluzioni in modo da poter abbinare il vostro design allo schermo degli spettatori. Un sito web ottimizzato e reattivo rende più facile il flusso degli utenti e, in definitiva, soddisfa il tuo pubblico.

Dimensioni dello schermo del telefono vs Area di visualizzazione

Quando si acquista un dispositivo, spesso vengono visualizzate sia le dimensioni dello schermo che la risoluzione specificata nelle specifiche. La sensibilità dello schermo è la misura diagonale dello schermo in pollici. Questo non dovrebbe essere confuso con la risoluzione, che è il numero di pixel sullo schermo, spesso visualizzato in termini di larghezza in altezza (cioè, 1024×768). Poiché i dispositivi della stessa dimensione dello schermo possono avere risoluzioni molto diverse, gli sviluppatori usano le finestre di visualizzazione quando creano pagine mobili facili da usare. Le viewport hanno versioni più piccole di risoluzione, il che permette di visualizzare i siti web su diversi dispositivi in modo più coerente. I viewport sono spesso più standardizzati e hanno una risoluzione più bassa della risoluzione.

Anche se i monitor dei desktop e dei laptop sono orizzontali (più alti), molti dispositivi mobili possono essere ruotati per visualizzare i siti in orientamento orizzontale e verticale (più alti della larghezza). Questo significa che i designer e gli sviluppatori devono progettare tenendo conto di queste differenze. Mentre i monitor di desktop e laptop sono orizzontali (più alti), molti dispositivi mobili possono essere ruotati per visualizzare i siti con orientamento orizzontale e verticale (più alto della larghezza). Questo significa che i designer e gli sviluppatori devono progettare tenendo conto di queste differenze.

Avete bisogno di aiuto per determinare se il vostro sito è responsive? Usa il nostro strumento gratuito per il responsive viewport.

Codifica per diverse dimensioni dello schermo del telefono

Sarebbe quasi impossibile per le aziende progettare ogni dispositivo individualmente. Invece, gli sviluppatori spesso raggruppano i progetti responsive:

Gruppo di stili nelle dimensioni più comuni per telefoni, tablet e desktop. In questo caso, qualsiasi cosa più grande di 7 pollici viene tipicamente visualizzata con una risoluzione desktop o… Utilizzare i breakpoint (definiti dalla larghezza dei pixel, che la visualizzazione regolerà in base alle dimensioni dello schermo) a seconda del design e della posizione. A volte lo sviluppatore può combinare entrambi i metodi se lo ritiene necessario. Si raccomanda di iniziare raggruppando le dimensioni tipiche dei dispositivi.

Se sei uno sviluppatore e vuoi creare gli stili necessari per lavorare con lo stile mobile o responsive, abbiamo incluso un frammento di CSS qui sotto che può aiutare. È importante notare che questi punti di rottura non sono fissi per tutti i siti e dovrebbero essere usati solo come una guida per iniziare:

Esempi:

media and (Maximum width: 991 pixels) { ** "The beginning of great styles of pills}media and (maximum width: 767 pixels) { ** The beginning of medium styles of pills}screen @media and (maximum width: 479px) { ** "The beginning of phone styles}

Quali sono le dimensioni dello schermo più popolari?

Sapendo che è importante considerare diversi dispositivi quando si progettano siti web, abbiamo compilato una lista dei dispositivi più moderni con le corrispondenti dimensioni in pixel e finestre di visualizzazione, che è riportata di seguito. Questa è una lista condensata, puoi trovare una lista più completa che include densità di pixel, risoluzioni fisiche e CSS (pixel per pollice quadrato, ‘ppi’) qui.