Pourquoi les en-têtes HTTP n'incluent-ils pas la résolution de l'appareil, la densité de pixels, etc.?

Je développe actuellement un site Web réactif avec des requêtes média CSS. Ce serait beaucoup plus facile si le serveur renvoyait un code HTML / CSS différent pour chaque fenêtre.
Je me demandais pourquoi le client ne pouvait pas inclure ses informations de fenêtre lors de la demande d'un fichier HTML. Ce comportement est déjà courant pour renvoyer des sites Web dans la langue correcte à l'aide de l'en- Accept-Languagetête.

En bref, ce n'était pas ainsi que le Wild Wild Web était conçu pour fonctionner.

La conception originale était simplement que le code HTML donnait au navigateur des indications sur le document. Quels bits mettre en évidence, où aller pour obtenir des fichiers image. Les décisions concernant la police (ainsi que la taille) étaient du ressort du navigateur et des paramètres de configuration locaux.

Oui, je sais que le monde a évolué, et maintenant les concepteurs de sites Web s'attendent à contrôler chaque pixel que nos yeux voient. Dans le passé, c'était le travail du thème du bureau pour le faire.

Je pense que vous n'avez pas totalement l'idée du Responsive Web Design . Servir différents HTML / CSS / JS sur la base du navigateur Web du client existe depuis un certain temps et je suis sûr que certains sites Web le font toujours - un exemple très clair est la façon traditionnelle de servir un mobile thème convivial pour un site Web.

Ce qui vous manque, à mon avis, c'est que dans votre scénario, si l'utilisateur change le port d'affichage de portrait en paysage, vous n'obtiendrez aucune réponse réactive, sauf si vous actualisez la page. La même action est requise si vous redimensionnez la fenêtre du navigateur Web ou modifiez le zoom par défaut. Un élément d'une page peut également répondre à d'autres éléments. Ainsi, si vous masquez la barre latérale à droite, par exemple, le contenu principal répondra au changement. Ceux-ci ne seront pas possibles à votre manière, à moins que vous actualisiez la page.

De plus, les requêtes HTTP ne sont pas uniquement conçues pour servir la totalité de la page Web. Dans de nombreux cas, vous envoyez une demande pour envoyer / recevoir des données, des fichiers, des images, etc. simples dont ils n'ont pas besoin pour transporter les métadonnées du port de vue et les frais généraux dans une échelle comme Internet seront beaucoup, je suppose .

Êtes-vous sûr de faire du design réactif? La conception réactive est techniquement la combinaison d'une conception fluide et de requêtes multimédias.

La conception fluide résout 90% du problème de la fenêtre d'affichage pour vous, si vous êtes intelligent sur la façon dont vous disposez les choses. Les requêtes médiatiques vous permettent d'obtenir les 10% restants en modifiant les caractéristiques de la grille en fonction des dimensions actuelles.

Si vous essayez de ne faire que du fluide (pourcentages partout, dimension relative de tout, rien spécifié en pixels, etc.), vous rencontrez le problème de ce qu'il faut faire lorsque la fenêtre est de taille radicalement différente (comme une vue paysage de bureau vs une vue portrait mobile). Certaines choses ne conviennent tout simplement pas lorsque vous passez de 2048 pixels à 640 pixels. Lorsque vous essayez de ne faire que des requêtes multimédias, vous vous retrouvez avec des dizaines et des dizaines d'interruptions de requêtes multimédias, et dans ce cas, vous microgérez essentiellement vos classes CSS. Aucune des deux approches n'est adéquate pour RWD - vous devez combiner les deux pour tout obtenir.

Mon conseil: créez trois ou quatre "résolutions et orientations nominales" différentes - comme le paysage de bureau, le portrait et le paysage de l'iPad, le portrait et le paysage de l'iPhone - et traitez-les comme vos structures filaires à partir desquelles travailler. Configurez ensuite vos requêtes multimédias pour ces pauses. Ensuite, travaillez très dur pour vous en tenir à ces quelques pauses, en utilisant des mises en page fluides pour y parvenir - très probablement avec une grille CSS quelconque (il y en a des dizaines pré-construites pour vous, ou vous pouvez rouler la vôtre).

Si vous avez un site Web dynamique qui récupère le contenu, un code comme celui-ci fera l'affaire (dans 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) {
    ...

Remarque: «informations d'identification» est pour le cookie de session

Ensuite, vous pouvez lire ces en-têtes côté serveur avec par exemple (en 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) {
        ...

Cela ne fonctionnera pas pour la simple raison que l'utilisateur peut redimensionner la fenêtre du navigateur sans recharger la page.

Une conception réactive signifie que la disposition change dynamiquement en réponse à différentes tailles de fenêtres et à d'autres facteurs. Ainsi, si la conception est fixée côté serveur en fonction de la taille de la fenêtre d'affichage au moment de la demande, elle ne répondra pas si la fenêtre est redimensionnée par l'utilisateur. C'est pourquoi les requêtes média sont évaluées côté client.