Perché le intestazioni HTTP non includono la risoluzione del dispositivo, la densità di pixel, ecc.?

Attualmente sto sviluppando un sito Web reattivo con query multimediali CSS. Sarebbe molto più semplice se il server restituisse un HTML / CSS diverso per ogni viewport.
Mi chiedevo perché il client non potesse includere le informazioni sul viewport quando richiedeva un file HTML. Questo comportamento è già comune per la restituzione di siti Web nella lingua corretta utilizzando l' Accept-Languageintestazione.

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

Il design originale era semplicemente che l'HTML dava al browser suggerimenti sul documento. Quali bit enfatizzare, dove andare per ottenere i file di immagine. Le decisioni relative al carattere (nonché alle dimensioni) sono state 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 possono vedere. In passato, quello era il compito del tema del desktop per farlo.

Penso che tu non abbia idea del Responsive Web Design . Fornire diversi HTML / CSS / JS basati sul browser Web del cliente è lì da un po 'di tempo e sono abbastanza sicuro che ci siano ancora alcuni siti Web che lo fanno ancora - un esempio molto chiaro è il vecchio stile di servire un cellulare tema amichevole per un sito Web.

Ciò che mi manca, secondo me, è che nel tuo scenario se l'utente cambia la porta di visualizzazione da verticale a orizzontale, non otterrai alcuna risposta reattiva, a meno che non aggiorni la pagina. La stessa azione è necessaria se si ridimensiona la finestra del browser Web o si modifica lo zoom predefinito. Anche un elemento in una pagina potrebbe rispondere anche ad altri elementi. Quindi, se nascondi la barra laterale a destra, ad esempio, il contenuto principale risponderà alla modifica. Questi non saranno possibili a modo tuo, di nuovo, a meno che tu non aggiorni la pagina.

Inoltre, le richieste HTTP non sono progettate solo per il server dell'intera pagina Web. In molti casi stai inviando una richiesta per inviare / ricevere dati semplici, file, immagini, ecc. Che non hanno bisogno di portare sulla meta-informazioni della view-port e il sovraccarico in una scala come Internet sarà molto immagino .

Sei sicuro di fare un design reattivo? Il responsive design è tecnicamente la combinazione di design fluido e media query.

Il design fluido risolve il 90% del problema del viewport per te, se sei intelligente su come disporre le cose. Le query multimediali ottengono 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 la finestra ha dimensioni drammaticamente diverse (come una vista orizzontale del desktop vs una vista verticale mobile). Alcune cose semplicemente non vanno bene quando si passa da 2048 px a 640 px. Quando provi a fare solo query multimediali, finisci con dozzine e dozzine di interruzioni di query multimediali, e in pratica in questo caso stai micromanaggiando le tue classi CSS. Nessuno dei due approcci è adeguato per RWD: devi combinare i due per ottenere tutto.

Il mio consiglio: crea tre o quattro diverse "risoluzioni e orientamenti nominali" - come Orizzontale desktop, verticale e orizzontale per iPad, verticale e orizzontale per iPhone - e trattali come i tuoi wireframe su cui lavorare. Quindi imposta le tue query multimediali per tali interruzioni. Quindi lavora sodo per attenersi a quelle poche interruzioni, usando layout fluidi per realizzarlo - molto probabilmente con una griglia CSS di qualche tipo (ce ne sono dozzine predefinite per te, o puoi rotolarne una tua).

Se si dispone di un sito Web dinamico che recupera il contenuto, un codice come questo funzionerà (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: le "credenziali" sono per i cookie di sessione

Quindi puoi leggere quelle intestazioni sul lato server con ad 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) {
        ...

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

Design reattivo significa che il layout cambia dinamicamente in risposta a diverse dimensioni della finestra e ad altri fattori. Quindi, se il design è fisso sul lato server in base alle dimensioni del viewport al momento della richiesta, non sarebbe reattivo se la finestra viene ridimensionata dall'utente. Questo è il motivo per cui le query multimediali vengono valutate sul lato client.