Sådan Opdager Du Mobilenheder Med JavaScript

I den moderne digitale verden er det afgørende, at hjemmesider tilpasser sig den enhed, brugeren benytter. Med et stigende antal besøgende, der tilgår internettet via smartphones og tablets, er det blevet en nødvendighed for udviklere at kunne identificere, om en bruger befinder sig på en mobil enhed. Dette giver mulighed for at levere en optimeret brugeroplevelse, hvad enten det drejer sig om at vise mobilvenligt indhold, tilpasse layoutet eller deaktivere funktioner, der ikke giver mening på mindre skærme. JavaScript er et kraftfuldt værktøj, der kan hjælpe os med netop denne opgave. Men hvordan gør man det bedst, og hvilke metoder er mest pålidelige i 2024? Denne guide vil dykke ned i de forskellige tilgange til at registrere mobilenheder ved hjælp af JavaScript, fra de klassiske metoder til de mere robuste og anbefalede strategier.

Brugeragent (User Agent) – Den Klassiske Tilgang

En af de ældste og mest ligetil metoder til at registrere en mobil enhed er ved at analysere browserens brugeragentstreng (User Agent string). Hver gang en browser anmoder om en webside, sender den en User Agent-streng, der indeholder information om browseren, operativsystemet og enheden. Denne streng kan tilgås i JavaScript via navigator.userAgent. Hvis strengen indeholder ord som "Mobile", "Android", "iPhone", "iPad", "iPod", "BlackBerry", "webOS" eller "Windows Phone", kan det indikere, at brugeren er på en mobil enhed.

Et simpelt eksempel på User Agent-sniffing kunne se sådan ud:

 if (navigator.userAgent.toLowerCase().match(/mobile|android|iphone|ipad|ipod|blackberry|webos|windows phone/i)) { // Enheden er sandsynligvis mobil console.log("Dette er en mobil enhed via User Agent."); } else { // Enheden er sandsynligvis desktop console.log("Dette er en desktop enhed via User Agent."); } 

Selvom denne metode er nem at implementere, har den betydelige begrænsninger. User Agent-strenge kan være inkonsekvente, variere på tværs af browsere og operativsystemer, og de kan endda forfalskes (spoofed) af brugeren eller browseren selv. Desuden er mange moderne tablets ikke inkluderet i "mobile" tags, og nogle desktop-browsere kan rapportere sig som mobile for kompatibilitetsformål. Dette gør User Agent-sniffing mindre pålidelig som den eneste detektionsmetode og anbefales generelt kun som en sidste udvej eller et supplement til mere robuste metoder.

Detektion via Touch-funktionalitet: maxTouchPoints

En mere moderne og ofte anbefalet metode til at registrere mobile enheder er at undersøge enhedens berøringsfunktioner. De fleste mobile enheder og tablets har berøringsskærme, mens traditionelle desktop-computere sjældent har. JavaScript-egenskaben navigator.maxTouchPoints returnerer det maksimale antal samtidige berøringspunkter, som enheden understøtter. Hvis denne værdi er større end 0, indikerer det, at enheden har en berøringsskærm, og dermed sandsynligvis er en mobil enhed eller en tablet.

 let harBerøringsskærm = false; if ("maxTouchPoints" in navigator) { harBerøringsskærm = navigator.maxTouchPoints > 0; } if (harBerøringsskærm) { console.log("Enheden har en berøringsskærm (via maxTouchPoints)."); } else { console.log("Enheden har ikke en berøringsskærm (via maxTouchPoints)."); } 

Denne metode er generelt mere pålidelig end User Agent-sniffing, da den bygger på enhedens faktiske hardware-kapabiliteter frem for en rapporteret streng. Dog skal man være opmærksom på, at visse desktop-skærme i dag også er berøringsfølsomme, og at nogle mobile enheder kan have eksterne mus eller tastaturer tilsluttet, hvilket kan komplicere billedet. Ikke alle browsere understøtter heller maxTouchPoints, så der skal tages højde for faldgruber.

Medieforespørgsler (Media Queries) og window.matchMedia

En anden kraftfuld metode, der ofte bruges i kombination med JavaScript, er CSS Media Queries. Selvom Media Queries primært bruges i CSS til at tilpasse styling baseret på skærmstørrelse og funktioner, kan JavaScript interagere med dem via window.matchMedia(). Specifikt kan vi tjekke for "pointer"-egenskaben, som beskriver den primære inputenheds præcision. En værdi på "coarse" (grov) indikerer en berøringsskærm eller en anden grov inputmetode (f.eks. fingerinput), mens "fine" (fin) indikerer en præcis inputmetode (f.eks. mus).

 let harGrovPointer = false; if (window.matchMedia && matchMedia("(pointer:coarse)").media === "(pointer:coarse)") { harGrovPointer = !!matchMedia("(pointer:coarse)").matches; } if (harGrovPointer) { console.log("Enheden har en grov pointer (sandsynligvis touch)."); } else { console.log("Enheden har en fin pointer (sandsynligvis mus/trackpad)."); } 

Denne metode er god, fordi den direkte afspejler, hvordan brugeren interagerer med siden, hvilket er mere relevant for brugeroplevelsen end blot at vide, om det er en "mobil enhed". En tablet med en ekstern mus vil stadig have en "fine" pointer, selvom den er en mobil enhed, hvilket kan være den adfærd, man ønsker at opfange for at levere den rette interaktion.

Den Forældede window.orientation

Historisk set har window.orientation-egenskaben været brugt til at detektere, om en enhed er mobil, da den kun findes på enheder, der understøtter skærmrotation (typisk smartphones og tablets). Egenskaben returnerer vinklen for viewportens rotation i grader (f.eks. 0, 90, -90, 180). Hvis window.orientation er defineret, antages det, at enheden er mobil.

 if ('orientation' in window) { // Enheden understøtter orientering, sandsynligvis mobil console.log("Enheden er sandsynligvis mobil (via window.orientation)."); } else { console.log("Enheden understøtter ikke orientering."); } 

Det er dog vigtigt at bemærke, at denne egenskab er forældet (deprecated) og ikke længere anbefales til brug. Moderne browsere og standarder bevæger sig væk fra den, og dens pålidelighed er faldende. Den bør kun bruges som en absolut sidste udvej, hvis ingen andre metoder er tilgængelige eller fungerer.

En Robust Detektionsmetode – Kombination af Tilgange

For at opnå den mest præcise og robuste detektion af mobile enheder anbefaler MDN Web Docs at kombinere flere af de nævnte metoder. Dette skaber et faldgrubenet, der fanger de fleste scenarier og minimerer fejlslutninger. Start med de mest pålidelige metoder som maxTouchPoints og matchMedia, og fald derefter tilbage på User Agent-sniffing som en sidste udvej.

 function erMobilEnhed() { let harBerøringsskærm = false; // 1. Tjek via maxTouchPoints (mest pålidelig for touch-enheder) if ("maxTouchPoints" in navigator) { harBerøringsskærm = navigator.maxTouchPoints > 0; } // 2. Fallback for ældre MS-specifikke touch-punkter else if ("msMaxTouchPoints" in navigator) { harBerøringsskærm = navigator.msMaxTouchPoints > 0; } // 3. Fallback via Media Query for grove pointere else { const mQ = window.matchMedia && matchMedia("(pointer:coarse)"); if (mQ && mQ.media === "(pointer:coarse)") { harBerøringsskærm = !!mQ.matches; } // 4. Fallback via forældet window.orientation (kun som sidste udvej) else if ('orientation' in window) { harBerøringsskærm = true; } // 5. Sidste udvej: User Agent sniffing else { const UA = navigator.userAgent; harBerøringsskærm = ( /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA) ); } } return harBerøringsskærm; } if (erMobilEnhed()) { console.log("Denne enhed er med stor sandsynlighed en mobil enhed."); // Udfør mobil-specifik logik her } else { console.log("Denne enhed er sandsynligvis en desktop/laptop."); // Udfør desktop-specifik logik her } 

Denne kombinerede tilgang giver en høj grad af nøjagtighed og tilpasningsevne. Den prioriterer de metoder, der direkte reflekterer enhedens input-kapabiliteter, før den falder tilbage på mindre præcise, men stadig brugbare, strategier.

Sammenligning af Detektionsmetoder

Ofte Stillede Spørgsmål (OSS)

Hvorfor er det vigtigt at detektere mobile enheder?

Det er afgørende for at kunne levere en optimal brugeroplevelse. Mobilbrugere har andre forventninger til layout, navigation og interaktion end desktop-brugere. Ved at detektere enheden kan du tilpasse indholdet, optimere ydeevnen (f.eks. ved at indlæse mindre billeder) og sikre, at din hjemmeside fungerer fejlfrit på alle skærmstørrelser. Dette forbedrer brugertilfredsheden og kan også have en positiv indvirkning på SEO.

Er det bedre at bruge CSS Media Queries end JavaScript til detektion?

For visuelle tilpasninger af layout og styling er CSS Media Queries ofte den foretrukne metode, da de er deklarative og håndteres direkte af browseren. JavaScript er bedst, når du har brug for at ændre adfærd, indlæse forskelligt indhold, eller udføre komplekse logiske handlinger baseret på enhedstypen. Ofte bruges de i kombination: CSS håndterer styling, JavaScript håndterer adfærd.

Hvad er "User Agent spoofing"?

User Agent spoofing er, når en bruger eller et program bevidst ændrer browserens User Agent-streng for at få den til at fremstå som en anden browser eller enhed. Dette kan gøres af forskellige årsager, f.eks. for at omgå begrænsninger på visse hjemmesider eller for at teste, hvordan en hjemmeside reagerer på forskellige enheder. Det er en af grundene til, at User Agent-sniffing ikke er den mest pålidelige detektionsmetode.

Vil disse metoder også detektere tablets?

Ja, de mere robuste metoder som maxTouchPoints og matchMedia('(pointer:coarse)') vil typisk detektere tablets, da de også har berøringsskærme og ofte en "grov" pointer. User Agent-sniffing kan være mindre pålidelig for tablets, da mange tablets har User Agents, der ligner desktop-browsere.

Hvad hvis en desktop-computer har en berøringsskærm?

Dette er et vigtigt punkt. Metoder baseret på touch-funktionalitet (maxTouchPoints, pointer:coarse) vil detektere disse enheder som havende touch-kapabiliteter. Dette er ofte den ønskede adfærd, da du ønsker at tilpasse din UI til touch-interaktion, uanset om enheden er en traditionel desktop eller en tablet. Det handler mere om input-typen end den generelle enhedskategori.

At kunne detektere, om en bruger er på en mobil enhed, er en fundamental færdighed for enhver webudvikler i dag. Ved at anvende de rette JavaScript-metoder – og især en kombination af dem – kan du skabe en mere responsiv, intuitiv og tilfredsstillende oplevelse for dine brugere, uanset hvilken enhed de vælger at bruge. Husk at prioritere metoder, der afspejler enhedens faktiske input-kapabiliteter, frem for blot at stole på User Agent-strenge. God fornøjelse med at optimere dine mobiloplevelser!

Hvis du vil læse andre artikler, der ligner Sådan Opdager Du Mobilenheder Med JavaScript, kan du besøge kategorien Teknologi.