Per i dispositivi mobili la risoluzione è in realtà grande, solo le dimensioni dello schermo sono piccole. basato su quello:
Risposte:
Il design reattivo non si basa né sulla risoluzione dello schermo né sulla dimensione dello schermo. Invece, il design reattivo si basa sul contenuto e sul modo in cui è realizzato che gli consente di adattarsi a tutte le dimensioni e risoluzioni.
Il modo in cui stai pensando al responsive design è sbagliato. Presumo che tu provenga da uno sfondo di design di stampa più convenzionale, sì? Progettare per il web è molto più liberatorio. I siti Web responsive spesso non hanno gli stessi punti di interruzione convenzionali o dimensioni / risoluzioni specifiche per cui sono fatti perché il Web ne consente di più: consente di raggiungere tutte le dimensioni dello schermo. Pertanto, puoi progettare utilizzando qualsiasi dimensione sia adatta a ciò che stai progettando, purché siano ragionevoli.
Detto questo, la migliore pratica è quella di progettare in modo mobile prima , che in realtà dovrebbe essere chiamato mobile più importante . Questo ti costringe a concentrarti sul contenuto che è più importante e possibile e quindi ti consente di aggiungere altro per schermi più grandi invece di forzarti a iniziare con più su schermi di grandi dimensioni e quindi rimuovere le cose quando si progetta per quelli più piccoli. Puoi leggere di più su questo nel mio primer design reattivo .
Ma dobbiamo anche progettare in modo da consentire la reattività. La migliore pratica di cui è un esempio dal vivo, sia in forma di prototipo o in qualche programma di wireframing, non un documento statico come un PSD. Per quanto riguarda il lato sviluppatore, dovremmo utilizzare le unità reattive e strutturare il nostro codice in modo sensato.
Detto questo, dovresti mettere le cose in termini di pixel, che significa risoluzione, non dimensioni dello schermo.
Ottima domanda davvero!
Solo alcuni pensieri qui che commentano un po 'le contraddizioni che stiamo affrontando oggi.
La tecnologia non è come dovrebbe essere da secoli.
Dovremmo progettare tutti sulla base di unità di vita reale (o dimensione percorsa) , con un certo grado di flessibilità e libertà per consentire all'utente di apportare alcune modifiche adizionali.
Ma per conoscere le misure della vita reale abbiamo bisogno di entrambe le informazioni. Dimensioni fisiche e risoluzione del dispositivo = densità dei pixel.
Ma si scopre che solo alcuni anni fa, i dispositivi dello schermo stanno iniziando a dichiarare la densità dei pixel. E alcuni non lo dichiarano al server, fanno solo molta pubblicità al riguardo. (Aka Ipad, Iphone)
La risoluzione del display può essere rilevata dal sistema operativo in quanto è indispensabile inviare un segnale di conseguenza, ma per le dimensioni reali dello schermo è necessario un enorme database di ciascun modello. Non bene.
Questo ci lascia solo con questa risoluzione dello schermo che sono alcune informazioni che possiamo conoscere.
Ma è totalmente diverso progettare per un grande monitor FullHD rispetto alla stessa risoluzione su un dispositivo mobile. Entrambi 1920x1080. Ahia.
Un caso speciale è che sui proiettori, perché non abbiamo idea della distanza di proiezione e della distanza degli spettatori.
Una soluzione parziale sono le media query, gli elementi vettoriali, ecc.
Per il web design: almeno fino a quando non troviamo qualcosa di meglio.
Design fluido (percentuali) e flusso naturale, sezioni ben definite.
1920 in larghezza
con media query probabilmente al 1280
e / o a 1024
probabilmente a 720
e 480.
con rilevamento del dispositivo per supporto adizionale.
Per app native mobili
Poiché è molto specifico, basta seguire le linee guida del marchio, per quanto riguarda l'interfaccia utente e le icone.
Modificato.
Perché scegliere una risoluzione per schermo piccolo su un dispositivo mobile FullHD?
Uno smartphone ha una risoluzione reale di FullHD ma normalmente sta dichiarando una piccola risoluzione al server e al browser. Puoi provare questo google https://www.google.com/search?q=what+is+my+screen+resolution in modo che le query multimediali funzionino.
Innanzitutto, grazie a tutti per le risposte e le preziose linee guida, ha sicuramente aiutato!
Consentimi di aggiungere la mia conclusione:
Praticamente, il targeting per la risoluzione dello schermo mobile non è una buona UX, la risoluzione è troppo alta per lo schermo piccolo, i caratteri saranno troppo piccoli per leggere, le icone saranno troppo piccole per fare clic, ecc.
Quindi, è meglio realizzare il design in base alle dimensioni effettive del viewport! In questo modo si basa su ciò che un utente può vedere e sentire.
Per raggiungere questo obiettivo nella vita reale, dovremmo aggiungere un meta tag di larghezza della finestra all'interno <head>dei documenti HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Questo dice al browser di eseguire il rendering della pagina con una larghezza uguale alla larghezza dello schermo in modo da assicurarsi che la larghezza della pagina HTML sia uguale alla larghezza dello schermo in termini di pixel. Lo sviluppo può quindi essere facilmente pianificato con query multimediali rivolte a diverse dimensioni di finestre mobili (che sono un po 'vicine tra loro) e produrranno elementi visivamente più chiari.
Perfavore, correggimi se sbaglio.
Sulla base della mia modesta esperienza, suggerisco i seguenti passaggi per un migliore sviluppo del sito Web reattivo:
1- usa view-port meta (vedi in alto), aumenterà anche il posizionamento della pagina web nei risultati di ricerca mobile secondo google. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Dopo il test, sembra che l'aggiunta della meta view-port da solo fornirà voti al tuo sito Web negli strumenti di test mobili https://developers.google.com/speed/pagespeed/insights/
2- potresti prendere in considerazione l'applicazione dell'approccio mobile-first, è sempre più facile andare più grande che più piccolo (dipende dalla complessità del tuo sito Web)
3- Applicare un sistema ibrido reattivo, un mix tra adattivo (fluido) e reattivo (css media-query), per raggiungere questo obiettivo:
Usa la percentuale per larghezza e margini / imbottiture orizzontali. (i margini verticali possono avere dimensioni dei pixel fisse se ti piace .. lo scorrimento non è più un problema)
Usa em per i caratteri, in questo modo quando cambi la dimensione del carattere per il corpo (o html) in media-query tutti gli elementi CSS si adatteranno a quella dimensione, usando px lo renderà un incubo perché devi andare per ogni classe CSS e cambia la dimensione del carattere.
I div flottanti sono a sinistra in modo da allinearsi correttamente allo spazio disponibile (o a destra se il progetto lo richiede).
4- Definire i punti di interruzione , utilizzare uno strumento di test reattivo per questo. Uso la visualizzazione di progettazione responsive di Firefox, semplicemente restringo la larghezza fino a raggiungere il punto in cui il sito Web diventa difettoso (ad es. 500px), ovvero un punto di interruzione segnalo.
Applicare le nuove regole CSS all'interno della media query per quel punto di interruzione (500px),
5- ricorda di preservare la qualità e la chiarezza del sito web! se gli elementi diventano poco chiari e troppo vicini tra loro, quindi espandi la larghezza degli elementi per occupare la larghezza del contenitore e farli impilare verticalmente,
e ricorda di dare una nuova dimensione del carattere per il corpo in modo che tutti i sotto-elementi ereditino un carattere più grande e diventino più leggibili.
6- Ripeti il test reattivo e definisci il tuo secondo punto di interruzione, molto probabilmente non otterrai molti punti di interruzione perché qui stiamo usando la progettazione fluida ed è qui che verrà utilizzato il rimborso delle percentuali!
Ho lavorato su un grande sito Web con elementi di design pesanti prima e richiedevo solo 2 query multimediali :)
Spero che possa aiutare
Il modo in cui una pagina reattiva viene ridisegnata si basa sulle dimensioni della finestra (non sullo schermo) in pixel virtuali (non pixel reali).
Su un desktop tradizionale in cui 1 pixel virtuale = 1 pixel reale, se il browser è impostato su una larghezza di 1000 px, la pagina si ridistribuirà per adattarsi a tale.
Su un iPhone 6, dove 1 pixel virtuale (Apple chiama questi punti ) = 3 pixel reali, la larghezza del browser è la larghezza dello schermo e il contenuto si ridurrebbe per adattarsi alla larghezza di 417px (anche se in realtà è 1242 pixel reali)
Quindi è un po 'strano, in quanto con gli esempi sopra, il dispositivo con meno pixel reali può essere visto come un viewport più ampio in un layout reattivo.