Ci ho pensato a lungo su questa cosa per tutta la mattina. Questa è una domanda molto interessante.
Penso che la soluzione voluta da Christian , che è anche lo standard defacto, sia una soluzione poco elegante che lavora contro il miglioramento progressivo. Mentre si può dire che è progressivo perché se l'utente non ha il sito Javascript abilitato, vedrà semplicemente una versione snella del sito web senza le extra extra caricate sulla vista.
Tuttavia, non mi piace questo approccio. Ho Javascript disabilitato per lo più nel mio browser, e faccio girare le finestre a 1024 - 1280px la maggior parte del tempo, e un sito progettato per una base di 800px con Javascript on-load mi apparirà piuttosto spoglio.
Detto questo, penso che potrei aver trovato una soluzione.
Penso che il modo migliore per progettare responsive design sia utilizzare un'immagine di tracciamento e un intervento sul lato server.
Nei tuoi fogli di stile, potresti avere:
@media (screen and max-device-width(800px) {
#sometag {
background-image: url('track-800.gif');
}
}
@media (screen and max-device-width(496px) {
#sometag {
background-image: url('track-496.gif');
}
}
Ora, a condizione che l'immagine sia pubblicata su un dominio abilitato per i cookie, il browser Web restituirà l'ID di sessione al server, abilitando le sessioni su quella richiesta. Se hai queste immagini servite da uno script php, puoi ora tracciare e memorizzare le dimensioni del dispositivo che l'utente sta usando.
Considerate queste informazioni ora memorizzate in una variabile di sessione, è possibile disabilitare le aree della pagina (sui carichi successivi della pagina) che non verranno mai visualizzate per la risoluzione del dispositivo dell'utente.
responsabilità
Questo metodo richiederebbe l'utilizzo di query multimediali max-device-width (), piuttosto che max-width (). La differenza è che la dimensione dell'applicazione sarà basata sulla dimensione della visualizzazione degli utenti, piuttosto che sulla dimensione della finestra.