Signatur
Beschreibung
Die schreibgeschützte Eigenschaft mobile der Schnittstelle NavigatorUAData liefert true, wenn der Browser eine mobile Umgebung meldet (z. B. Chrome auf einem Android-Smartphone), sonst false. Du erreichst sie über navigator.userAgentData.mobile.
mobile gehört zu den Werten mit geringer Entropie der User-Agent Client Hints. Sie ist deshalb synchron verfügbar, ohne getHighEntropyValues() aufzurufen. Auf Serverseite entspricht ihr der HTTP-Header Sec-CH-UA-Mobile (?1 bzw. ?0).
Gedacht ist die Eigenschaft als strukturierter, datenschutzfreundlicher Ersatz für das fehleranfällige Parsen von navigator.userAgent nach Stichworten wie "Mobi". Sinnvoll ist sie etwa für Statistik, für die Wahl einer passenden Download-Variante oder als grobe Voreinstellung, zum Beispiel eine vereinfachte Oberfläche.
Für das Layout selbst solltest du aber weiterhin Feature Detection und Media Queries nutzen, etwa (pointer: coarse), (hover: none) oder die Viewport-Breite. Aus „mobil“ folgt nämlich weder eine bestimmte Bildschirmgröße noch zwingend eine Touch-Eingabe.
Rückgabewert
true, wenn der User-Agent ein mobiles Gerät meldet, sonst false.Beispiele
Einfache Abfrage mit Fallback
// Client Hints nutzen, wenn vorhanden – sonst auf den UA-String zurückfallen
const isMobile = () => {
if (navigator.userAgentData) {
return navigator.userAgentData.mobile;
}
// Fallback für Firefox/Safari (ungenauer)
return /Mobi|Android/i.test(navigator.userAgent);
};
console.log(`Mobiles Gerät: ${isMobile()}`);Voreinstellung für eine vereinfachte Oberfläche
const applyInitialMode = () => {
const uaMobile = navigator.userAgentData?.mobile ?? false;
// Mit einer Media Query kombinieren – die tatsächliche Eingabeart ist entscheidend
const coarsePointer = window.matchMedia('(pointer: coarse)').matches;
document.documentElement.classList.toggle('compact-ui', uaMobile || coarsePointer);
console.log({ uaMobile, coarsePointer });
};
applyInitialMode();Wert an ein Analytics-Backend senden
const reportDeviceClass = async () => {
const data = navigator.userAgentData;
const payload = {
mobile: data?.mobile ?? null, // geringe Entropie, synchron
platform: data?.platform ?? 'unbekannt',
brands: data?.brands.map(b => `${b.brand} ${b.version}`) ?? []
};
await fetch('/api/analytics/device', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
console.log('Gesendet:', payload);
};
reportDeviceClass();Auch in getHighEntropyValues() enthalten
const logUAInfo = async () => {
if (!navigator.userAgentData) return console.log('Client Hints nicht unterstützt');
const info = await navigator.userAgentData.getHighEntropyValues(['model']);
// mobile, platform und brands sind im Ergebnis immer enthalten
console.log(info.mobile, info.model);
};
logUAInfo();// Wichtig · Fallstricke
- Browser-Unterstützung: Nur in Chromium-Browsern (Chrome, Edge, Opera, Samsung Internet) vorhanden. In Firefox und Safari ist
navigator.userAgentDataundefined. Prüfe deshalb immer mit optionaler Verkettung (?.) und sieh einen Fallback vor. - Nur in sicheren Kontexten: Über HTTP (außer
localhost) ist die API nicht verfügbar. - Tablets: Auf Tablets meldet der Browser oft
false, etwa wenn Chrome auf Android-Tablets eine Desktop-Ansicht anfordert. Der Modus „Desktop-Website anfordern“ setzt den Wert ebenfalls auffalse. In den DevTools lässt sich der Wert per Geräteemulation verändern. - Nicht für das Layout verwenden:
mobilesagt nichts über Bildschirmgröße, Touch-Eingabe oder Leistung aus. Für responsives Design nutzt du Media Queries wie(pointer: coarse)und(hover: none). - Nicht vertrauenswürdig: Der Client kann den Wert fälschen. Für sicherheitsrelevante Entscheidungen ist er ungeeignet.
- Serverseitig ist derselbe Wert ohne Zusatzanfrage über den Header
Sec-CH-UA-Mobileverfügbar.