Originariamente inviata da
KillerWorm
Ciao, se parliamo di responsive web design, le media query CSS sono lo strumento più affidabile, versatile e adatto nella stragrande maggioranza dei casi per determinare l'impaginazione degli elementi nella pagina.
Con la regola
@media è possibile impostare le media query all'interno delle regole CSS; oppure attraverso la dichiarazione
@import o con l'
attributo media del tag <link>, è possibile impostare le media query in modo da condizionare l'uso di differenti fogli di stile per differenti media.
Esistono poi diverse tecniche a livello programmatico per effettuare il "
browser sniffing" sia lato client sia lato server.
Lato client: attraverso JavaScript è possibile usare proprietà come
navigator.userAgent o
window.matchMedia o altro ancora per poter dedurre il tipo di dispositivo utilizzato. Qui una guida:
Browser detection using the user agent.
Lato server: con un qualsivoglia linguaggio lato è possibile ricevere informazioni riguardo il browser utilizzato (user agent), prima che il documento sia trasmesso dal server al client stesso. E' possibile quindi leggere a priori l'impronta digitale del browser (
device fingerprint) per determinare quale output restituire al client. Qui una raccolta di snippet per vari linguaggi:
Detect Mobile Browsers