Warum enthalten HTTP-Header keine Geräteauflösung, Pixeldichte usw.?

Ich entwickle derzeit eine reaktionsfähige Website mit CSS-Medienabfragen. Es wäre viel einfacher, wenn der Server für jedes Ansichtsfenster ein anderes HTML / CSS zurückgeben würde.
Ich habe mich gefragt, warum der Client beim Anfordern einer HTML-Datei seine Ansichtsfensterinformationen nicht angeben konnte. Dieses Verhalten tritt bereits häufig bei der Rückgabe von Websites in der richtigen Sprache mithilfe des Accept-LanguageHeaders auf.

Kurz gesagt, so sollte das Wild Wild Web nicht funktionieren.

Das ursprüngliche Design war einfach, dass der HTML-Code dem Browser Hinweise zum Dokument gab. Welche Bits müssen hervorgehoben werden, wohin müssen Bilddateien abgerufen werden? Entscheidungen über die Schriftart (sowie welche Größe) waren Aufgabe des Browsers und der lokalen Konfigurationseinstellungen.

Ja, ich weiß, dass sich die Welt weiterentwickelt hat, und jetzt erwarten Webdesigner, dass sie jedes Pixel kontrollieren, das unsere Augen sehen. In der Vergangenheit war dies die Aufgabe des Desktop-Themas.

Ich denke, Sie haben die Idee von Responsive Web Design noch nicht ganz verstanden . Das Bereitstellen von unterschiedlichem HTML / CSS / JS basierend auf dem Webbrowser des Kunden gibt es schon seit einiger Zeit, und ich bin mir ziemlich sicher, dass es immer noch einige Websites gibt, die dies tun - ein sehr klares Beispiel ist die alte Art, ein Mobiltelefon bereitzustellen -freundliches Thema für eine Website.

Was Sie meiner Meinung nach vermissen, ist, dass in Ihrem Szenario, wenn der Benutzer das Ansichtsfenster von Hochformat in Querformat ändert, Sie keine Antwort erhalten, es sei denn, Sie aktualisieren die Seite. Dieselbe Aktion ist erforderlich, wenn Sie die Größe des Webbrowser-Fensters ändern oder den Standardzoom ändern. Ein Element auf einer Seite kann auch auf andere Elemente reagieren. Wenn Sie beispielsweise die Seitenleiste rechts ausblenden, reagiert der Hauptinhalt auf die Änderung. Diese sind auf Ihre Weise wieder nicht möglich, es sei denn, Sie aktualisieren die Seite.

Auch HTTP-Anfragen dienen nicht nur dazu, die gesamte Webseite zu bedienen. In vielen Fällen senden Sie eine Anfrage zum Senden / Empfangen von einfachen Daten, Dateien, Bildern usw., die nicht für die Metainformationen des Ansichtsfensters erforderlich sind, und der Overhead in einer Größenordnung wie dem Internet wird meiner Meinung nach sehr hoch sein .

Sind Sie sicher, dass Sie Responsive Design machen? Responsive Design ist technisch gesehen die Kombination aus Fluid Design und Medienabfragen.

Fluid Design löst 90% des Problems mit dem Ansichtsfenster für Sie, wenn Sie klug sind, wie Sie die Dinge gestalten. Bei Medienabfragen erhalten Sie die anderen 10%, indem Sie die Rastereigenschaften basierend auf den aktuellen Abmessungen ändern.

Wenn Sie versuchen, nur flüssig zu arbeiten (Prozentsätze überall, relative Größe für alles, nichts in Pixel angegeben usw.), stoßen Sie auf das Problem, was zu tun ist, wenn sich die Größe des Ansichtsfensters erheblich unterscheidet (wie bei einer Desktop-Landschaftsansicht vs. eine mobile Porträtansicht). Einige Dinge passen einfach nicht, wenn Sie von 2048px auf 640px wechseln. Wenn Sie versuchen, nur Medienabfragen durchzuführen, kommt es zu Dutzenden von Medienabfrageunterbrechungen, und in diesem Fall verwalten Sie Ihre CSS-Klassen im Grunde genommen im Mikromanagement. Keiner der beiden Ansätze ist für RWD angemessen - Sie müssen beide kombinieren, um alles zu erhalten.

Mein Rat: Erstellen Sie drei oder vier verschiedene "nominelle Auflösungen und Ausrichtungen" - wie Desktop-Landschaft, iPad-Hoch- und Querformat, iPhone-Hoch- und Querformat - und behandeln Sie sie als Ihre Drahtgitter, mit denen Sie arbeiten können. Richten Sie dann Ihre Medienabfragen für diese Pausen ein. Arbeiten Sie dann sehr hart daran, diese wenigen Pausen einzuhalten, und verwenden Sie dazu flüssige Layouts - höchstwahrscheinlich mit einem CSS-Raster (es gibt Dutzende davon, die für Sie vorgefertigt sind, oder Sie können Ihre eigenen rollen).

Wenn Sie eine dynamische Website haben, die den Inhalt abruft, reicht ein Code wie dieser aus (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) {
    ...

Hinweis: 'Anmeldeinformationen' gelten für Sitzungscookies

Dann können Sie diese Header beispielsweise serverseitig lesen (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) {
        ...

Dies funktioniert aus dem einfachen Grund nicht, dass der Benutzer die Größe des Browserfensters ohne erneutes Laden der Seite ändern kann.

Responsive Design bedeutet, dass sich das Layout dynamisch ändert, wenn unterschiedliche Ansichtsfenstergrößen und andere Faktoren berücksichtigt werden. Wenn das Design also auf der Serverseite basierend auf der Größe des Ansichtsfensters zum Zeitpunkt der Anforderung festgelegt ist, reagiert es nicht, wenn die Größe des Fensters vom Benutzer geändert wird. Aus diesem Grund werden Medienabfragen auf der Clientseite ausgewertet.