Responsive Web Design vs. Sniffing User-Agent

La mediafunzione di query CSS3 ha portato a molte interessanti possibilità in termini di sviluppo di siti Web che si adattano a dimensioni e dispositivi di schermi diversi.

Tuttavia, in pratica, sto iniziando a capire che la mediafunzionalità di query CSS3 e l'intero movimento "Responsive Web Design" potrebbero non essere all'altezza delle sue promesse.

Il problema che vedo è che, alla fine della giornata, gli sviluppatori web si preoccupano soprattutto se i loro utenti stanno visualizzando i contenuti tramite un dispositivo desktop, tablet o mobile. Ma CSS3 fornisce solo un mezzo per rilevare la risoluzione dello schermo . In teoria, rilevare la risoluzione dello schermo sembra un ottimo modo per adattarsi a vari dispositivi diversi. Ma in pratica ...

Supponiamo di avere una semplice funzione Javascript che produce solo la larghezza dello schermo:

function foo()
{
   alert(screen.width);
}

Sul mio Blackberry Touch, questo produce:

Sul mio Samsung Galaxy, questo produce:

Quindi ... a questo punto, la risoluzione degli smartphone tradizionali si sta avvicinando abbastanza alle risoluzioni a livello di desktop. La capacità di rilevare se un utente sta visualizzando il tuo sito Web tramite uno smartphone, un tablet o un desktop, sembra essere sempre più difficile se tutto ciò che stai passando è la risoluzione dello schermo.

Questo mi fa mettere in discussione l'intera saggezza che sta dietro l'intero movimento CSS3 "Responsive Web Design" basato su query dei media. Sembra quasi che la mediafunzione di query sia più adatta ad adattarsi a una finestra del browser di ridimensionamento su uno schermo del desktop, piuttosto che a vari dispositivi mobili.

Un'altra possibile tecnica per rilevare dispositivi mobili o tablet consiste nell'utilizzare il rilevamento delle funzionalità, verificando se l' ontouchstartevento è supportato. Ma anche questo sta diventando inaffidabile poiché molti schermi desktop iniziano a supportare il tocco.

Domanda: Quindi ... come sviluppatore web, se non posso fare affidamento su RWD o sul rilevamento delle funzionalità, lo sniffing user-agent (notoriamente inaffidabile come sempre) è davvero l'opzione migliore per rilevare i dispositivi mobili?

web-development javascript css

— Channel72
fonte

Se l'obiettivo di Responsive Web Design è (come afferma Wikipedia ) "facile lettura e navigazione con un minimo di ridimensionamento, panoramica e scorrimento", allora perché ti importa se è un desktop o un cellulare? Ciò che conta è la risoluzione e le dimensioni dello schermo del dispositivo, non il tipo di dispositivo. No?

— ruakh,

Immagino che ciò che sto dicendo sia che la connessione tra "risoluzione dello schermo" e dimensioni effettive dello schermo (ad esempio centimetri / pollici di larghezza dello schermo) sta diventando sempre più transitoria.

— Channel72,

Ho pensato che dovresti fare qualcosa con la query multimediale di larghezza del dispositivo perché la larghezza / risoluzione sta diventando sempre più imprecisa, specialmente con la densità di pixel di vari display, ad esempio i dispositivi "Retina" di Apple. Quindi, se la larghezza del dispositivo è all'interno della larghezza generale per un dispositivo mobile, allora si mostra un layout diverso. Per un utente di tablet / desktop mostro solo lo stesso layout, ovvero larghezza di 1024 px.

— zuallauz,

@zuallauz, il supporto non è device-widthabbastanza male?

— Channel72,

Perché non andare per unità em? In questo modo il contenuto cambia in base allo spazio di testo disponibile ...

Risposte:

Smetti di preoccuparti così tanto di dispositivi specifici.

La capacità di rilevare se un utente sta visualizzando il tuo sito Web tramite uno smartphone, un tablet o un desktop, sembra essere sempre più difficile se tutto ciò che stai passando è la risoluzione dello schermo

E sta diventando sempre più difficili da rilevare tramite la risoluzione dello schermo, e sarà solo più difficile man mano più dispositivi entrare nel mercato, ma lo scopo di media query non è quello di rilevare dispositivo types.What media query sono bravo a sta facendo modifiche al vostro progetto quando non è più piacevole da usare alle dimensioni attuali. Se il sito inizia a crollare a 550 px di larghezza, non importa se esiste un dispositivo con quelle dimensioni o meno: imposti il punto di interruzione lì.

È lo stesso affare con il rilevamento delle funzionalità. Se il dispositivo supporta il tocco, che importanza ha se si tratta di un dispositivo mobile o di un futuro monitor da parete? In ogni caso, i miglioramenti del tocco saranno probabilmente utili.

L'annusamento dell'agente utente - come hai affermato - è completamente inaffidabile. Potrei cambiare la mia stringa User-agent in virgolette di Shakespeare se volessi davvero anche io. Cosa deciderà il tuo sito sul mio browser allora?

Gli interpreti richiedono anche molto lavoro per gestire tutte le possibilità. Ne hai uno per Firefox su Android? Chrome su IOS? Delfino su Froyo? Il browser WiiU? Il browser estremamente limitato sul mio vecchio telefono LG? Lince? IE 13? Link? IceWeasel? Il browser del playbook Blackberry? In che modo stai distinguendo tra Opera in esecuzione su un tablet e opera in esecuzione su un telefono?

Questo elenco può crescere solo col passare del tempo.

— Mike Gossmann
fonte

Bene, un layout a 1 colonna di solito si presta bene agli smartphone. Per un tablet, puoi cavartela con un layout a 2 colonne o anche a 3 colonne, e per i desktop in genere 3 colonne funzionano bene. Indipendentemente da ciò, il numero ideale di colonne visualizzate è in genere una funzione delle capacità biologiche dell'occhio umano , piuttosto che della risoluzione dello schermo. Il mio punto è che sarebbe bello se ci fosse una stretta correlazione tra la risoluzione dello schermo e la probabilità che un tipico essere umano sarà in grado di scansionare facilmente il tuo sito visivamente. Almeno, CSS3 sembra assumere tale correlazione.

— Channel72,

Dovrebbe esserlo, in realtà. I pixel CSS dovrebbero essere definiti usando angoli e distanze non pixel fisici. Molti produttori lo ignorano nelle loro impostazioni predefinite.

— Mike Gossmann,

@ Channel72 Un layout a 1 colonna si presta bene a qualsiasi larghezza dello schermo ridotta . Poco importa se la larghezza dello schermo è ridotta perché si tratta di un browser per smartphone o di un browser desktop in una finestra ridimensionata su un monitor gigante. Il web design reattivo tenta di soddisfare tutti gli scenari in modo appropriato, indipendentemente dal programma utente.

— Eric King,

Che cosa succede se hai intenzione di offrire una visualizzazione completamente diversa per gli utenti mobili. Che dire di impedire agli utenti mobili di scaricare tutti i dati irrilevanti necessari per gli utenti desktop. L'agente utente è la strada da percorrere ...

— John,

Anche gli agenti utente mentono. Se cerchi Google, troverai elenchi di agenti utente vs realtà. Quindi questo è un problema. Alcuni ricorrono a guardare l'impostazione dpi per determinare quale o quale tipo di dispositivo è.

— rapinare
fonte

Se qualcuno avesse bisogno di fornire dati falsi nei dati dell'agente utente, otterrà una versione predefinita del sito Web ...

— John,