HTTP Viewport-Width Header

Der HTTP-Header Viewport-Width ist ein Request-Header, der die aktuelle Viewport-Breite des Clients in CSS-Pixeln kommuniziert. Als Client Hint ermöglicht er Server-seitige Optimierung von Bildern und Layouts für verschiedene Bildschirmgrößen.

Typ

Request-Header

Syntax

Der Header sendet die Viewport-Breite als Integer-Wert in CSS-Pixeln.

http 
Viewport-Width: 1920
Viewport-Width: 375

Direktiven

Die Direktive definiert die Viewport-Dimension des Clients.

<width>
Viewport-Breite in CSS-Pixeln (nicht physikalische Pixel). Ganzzahlwert, typischerweise zwischen 320 (kleine Mobile-Geräte) und 3840 (4K-Displays).

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den Viewport-Width-Header.

Beispiel 1 Mobile Viewport Request

http 
GET /api/images/hero.jpg HTTP/1.1
Host: cdn.example.com
Viewport-Width: 375
DPR: 2
Accept-CH: Viewport-Width, DPR

iPhone sendet 375px Viewport-Breite mit 2x DPR, Server kann 750px breites Bild für optimale Darstellung liefern.

Beispiel 2 Desktop Viewport mit Opt-In

Client erhält zuerst:

http 
HTTP/1.1 200 OK
Accept-CH: Viewport-Width, Width, DPR
Vary: Viewport-Width

Nachfolgende Requests:

http 
GET /content HTTP/1.1
Host: api.example.com
Viewport-Width: 1920

Server aktiviert Client Hints, Browser sendet in Folge-Requests Viewport-Informationen.

Beispiel 3 Adaptive Image Serving

http 
GET /api/gallery/photo.jpg HTTP/1.1
Host: images.example.com
Viewport-Width: 768
Width: 400
DPR: 2

Tablet mit 768px Viewport fordert Bild an, das 400px breit dargestellt wird bei 2x DPR, Server liefert 800px optimiertes Bild statt Full-Resolution.

Client Hints Viewport Flow

Viewport-Width Client Hints Flow

Vorteile für die Systemarchitektur

  • Bandwidth-Optimierung: Server liefert nur die notwendige Bildgröße, spart 60-80% Bandbreite auf mobilen Geräten
  • Server-Side Responsive: Keine Client-Side JavaScript-Detection notwendig für adaptive Inhalte
  • CDN-Cache-Effizienz: Kombination mit Vary-Header ermöglicht Viewport-spezifisches Caching

Spezifikation

HTTP Client Hints, Viewport-Width https://httpwg.org/http-extensions/client-hints.html#viewport-width

Weitere Spezifikationen

Width Header, Accept-CH Header