Perché le intestazioni HTTP non includono la risoluzione del dispositivo, la densità dei pixel e così via?

In breve, non era così che Wild Wild Web è stato progettato per funzionare.

Il design originale era semplicemente che l'HTML forniva suggerimenti al browser sul documento. Quali bit enfatizzare, dove andare a prendere i file di immagine. Le decisioni relative al carattere (oltre alle dimensioni) erano il lavoro del browser e le impostazioni di configurazione locali.

Sì, so che il mondo è passato, e ora i web designer si aspettano di controllare ogni pixel che i nostri occhi vedono. Nel passato passato, era compito del tema del desktop farlo.

Penso che tu non abbia avuto totalmente l'idea di Responsive Web Design . Servire diversi HTML / CSS / JS in base al browser web del client è lì da un po 'e sono abbastanza sicuro che ci siano ancora alcuni siti web che lo fanno ancora - un esempio molto chiaro è il modo in cui la vecchia scuola serve un cellulare tema amichevole per un sito web.

Quello che ti manca, secondo me, è che nel tuo scenario, se l'utente cambia la vista-porta da verticale a orizzontale, non otterrai alcuna risposta reattiva, a meno che tu non aggiorni la pagina. La stessa azione è necessaria se ridimensionate la finestra del browser Web o modificate lo zoom predefinito. Anche un elemento in una pagina potrebbe essere sensibile anche ad altri elementi. Quindi, se si nasconde la barra laterale sulla destra, ad esempio, il contenuto principale risponderà alla modifica. Questi non saranno più possibili a modo tuo, a meno che non aggiorni la pagina.

Anche le richieste HTTP non sono solo progettate per gestire la pagina web intera . In molti casi stai inviando richieste di invio / ricezione di dati, file, immagini, ecc. Che non è necessario portare sulla meta-informazione della porta-vista e il sovraccarico in una scala come Internet sarà molto credo.

Sei sicuro che stai progettando responsive? Il design reattivo è tecnicamente la combinazione di design fluido e domande dei media.

Il design fluido risolve il 90% del problema relativo alla vista per te, se sei intelligente su come sistemare le cose. Le query multimediali ti danno l'altro 10% modificando le caratteristiche della griglia in base alle dimensioni correnti.

Se stai provando a fare solo fluidi (percentuali ovunque, dimensionamento relativo su tutto, niente specificato in pixel, ecc.) ti imbatti nel problema di cosa fare quando il viewport ha dimensioni notevolmente diverse (come un desktop vista orizzontale rispetto a una vista verticale mobile). Alcune cose semplicemente non si adattano quando vai da 2048px a 640px. Quando si tenta di eseguire solo le query multimediali, si ottengono decine e decine di interruzioni di query multimediali e in questo caso si esegue essenzialmente il micromanaging delle classi CSS. Nessuno dei due approcci è adeguato per RWD - devi combinare i due per ottenere tutto.

Il mio consiglio: crea tre o quattro "risoluzioni e orientamenti nominali" diversi, ad esempio Desktop landscape, iPad portrait e landscape, iPhone portrait e landscape, e considerali come i wireframe su cui lavorare. Quindi imposta le tue query multimediali per quelle interruzioni. Quindi lavora molto duramente per attenersi a quelle poche interruzioni, usando layout fluidi per realizzarlo - molto probabilmente con una griglia CSS di qualche tipo (ce ne sono decine prefabbricate per te o puoi farcela da sola).

Questo non funzionerà per il semplice motivo che l'utente può ridimensionare la finestra del browser senza ricaricare la pagina.

Progettazione reattiva significa che il layout cambia dinamicamente in risposta a dimensioni di viewport differenti e ad altri fattori. Quindi, se il progetto è fisso sul lato server in base alla dimensione del viewport al momento della richiesta, non sarebbe reattivo se la finestra viene ridimensionata dall'utente. Questo è il motivo per cui le query sui media vengono valutate sul lato client.

Se hai un sito web dinamico che recupera il contenuto, un codice come questo farà il trucco (in ES6):

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

Nota: 'credenziali' è per cookie di sessione

Quindi puoi leggere quelle intestazioni lato server con per esempio (in PHP):

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...