HTTP Sec-CH-UA-Mobile Header

Der HTTP-Header Sec-CH-UA-Mobile ist ein Low-Entropy Request-Header aus den User Agent Client Hints, der anzeigt, ob das Gerät ein Mobilgerät ist. Er wird standardmäßig ohne Opt-In gesendet und ist einer der wichtigsten Hints für Responsive Design und Mobile-First Strategies.

Typ

Request-Header

Syntax

Der Header gibt den Mobile-Status als strukturiertes Boolean an.

http 
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Mobile: ?0

Direktiven

Die Direktiven definieren den Mobile-Device-Status als Structured Field Boolean.

?1
Gerät ist ein Mobilgerät. Typischerweise Smartphones mit Touch-Eingabe und kleinen Bildschirmen unter 7 Zoll. Erfordert Mobile-optimiertes Layout.
?0
Gerät ist kein Mobilgerät. Desktop, Laptop oder Tablet. Kann Desktop-Layout mit voller Feature-Komplexität erhalten.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den Sec-CH-UA-Mobile-Header.

Beispiel 1 Smartphone sendet Mobile Flag

http 
GET /shop HTTP/1.1
Host: store.example.com
Sec-CH-UA-Mobile: ?1
Sec-CH-UA: "Chromium";v="120", "Google Chrome";v="120"

Android-Smartphone wird als Mobile erkannt, Server liefert Touch-optimiertes Layout mit gestackten Produktkarten statt Grid-Layout.

Beispiel 2 Desktop ohne Mobile Flag

http 
GET /dashboard HTTP/1.1
Host: app.example.com
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "Windows"

Desktop-Browser erhält komplexes Dashboard mit Sidebars, Hover-Interactions und Multi-Column-Layout für große Monitore.

Beispiel 3 Adaptive Image Serving

http 
HTTP/1.1 200 OK
Vary: Sec-CH-UA-Mobile
Content-Type: text/html

<picture>
  <source media="(max-width: 768px)" srcset="hero-mobile.webp">
  <source srcset="hero-desktop.webp">
  <img src="hero-desktop.webp" alt="Hero">
</picture>

Server cached separate Versionen für Mobile und Desktop. CDN nutzt Vary-Header für intelligentes Caching basierend auf Device-Type.

Mobile Detection Flow

Mobile Client Hint Ablauf

Vorteile für die Systemarchitektur

  • Low-Entropy Default: Wird immer gesendet ohne Accept-CH Opt-In, ermöglicht sofortige Mobile-Detection ab erstem Request
  • Besseres Caching: Vary-Header erlaubt CDNs separate Caches für Mobile und Desktop statt User-Agent-String-Parsing
  • Responsive SSR: Server-Side Rendering kann initiales HTML für Mobile optimieren, verhindert Layout-Shifts beim clientseitigen Responsive Breakpoint

Spezifikation

User-Agent Client Hints – WICG Draft https://wicg.github.io/ua-client-hints/

Weitere Spezifikationen

Sec-CH-UA Header, Accept-CH Header