How do I enable JavaScript on mobile?

isMobile: Optimer Din Mobiloplevelse

25/12/2021

★★★★★Rating: 4.58 (1713 votes)

I en verden, hvor mobiltelefoner dominerer vores digitale interaktioner, er det afgørende for webudviklere at kunne levere en optimal brugeroplevelse på tværs af forskellige enheder. Selvom responsivt design har løst mange udfordringer, opstår der stadig specifikke "edge cases", hvor mere præcis enhedsdetektion er nødvendig. Her kommer isMobile JavaScript-biblioteket ind i billedet – et simpelt, men kraftfuldt værktøj designet til at identificere mobile enheder både i browseren og på server-siden (Node.js). Dette bibliotek giver udviklere mulighed for at træffe informerede beslutninger baseret på brugernes enhedstype, hvilket åbner døren for skræddersyede løsninger og forbedret ydeevne.

What is a mobile JS library?
A simple JS library that detects mobile devices in both the browser and NodeJS. Why use isMobile? You might not need this library. In most cases, responsive design solves the problem of controlling how to render things across different screen sizes. I recommend a mobile first approach. But there are always edge cases.

Ved at forstå, hvilken enhed en bruger tilgår dit indhold fra, kan du implementere unikke funktioner, omdirigere dem til en mere passende version af din side eller optimere ressourceleverancen for at sikre den bedst mulige interaktion. isMobile er skabt med fokus på ydeevne og enkelhed, hvilket gør det til et ideelt valg for situationer, hvor hastighed og præcision er altafgørende.

Indholdsfortegnelse

Hvorfor bruge isMobile?

Selvom responsivt webdesign er den foretrukne tilgang for de fleste moderne webprojekter, hvor layoutet automatisk tilpasser sig skærmstørrelsen, findes der situationer, hvor en mere specifik enhedsdetektion er uundværlig. Dette er de såkaldte "edge cases", hvor isMobile-biblioteket virkelig skinner.

I browseren

Forestil dig, at du driver en stor e-handelsplatform og ønsker at lede mobilbrugere til en fuldstændig optimeret mobilversion af din side, der er designet til at være lynhurtig og nem at navigere på med fingrene. Her kan et simpelt CSS-mediequery ikke altid gøre det, da det kun reagerer på skærmstørrelse, ikke enhedstype. isMobile er skabt til netop dette formål: at udføre en hurtig og effektiv detektion direkte i <head>-sektionen af dit HTML-dokument. Dens minimale filstørrelse på omkring 1.3 KB (minificeret) er afgørende. At køre JavaScript i <head> kan normalt blokere rendering og download af andre ressourcer, men for enhedsdetektion, der fører til en omadressering, er det en fordel. Jo hurtigere omdirigeringen sker, jo mindre unødvendig data skal mobilbrugeren downloade fra den fulde desktop-side. For desktop-brugere eksekveres scriptet så hurtigt, at det næppe påvirker indlæsningstiden, og browseren kan hurtigt fortsætte med at opbygge siden.

Andre "edge cases" i browseren kan inkludere:

  • Betinget indlæsning af specifikke scripts eller CSS-filer, der kun er relevante for visse enhedstyper.
  • Visning af enheds-specifikke meddelelser eller funktionaliteter (f.eks. "tryk her for at downloade vores app").
  • Implementering af A/B-test, hvor mobilbrugere skal have en anden oplevelse end desktop-brugere.

På server-siden (Node.js)

isMobile er ikke kun begrænset til browseren. I et Node.js-miljø kan biblioteket bruges til at udføre server-side enhedsdetektion. Dette er især nyttigt, hvis du ønsker at minimere mængden af data, der sendes til brugerens browser, ved kun at servere det indhold, der er relevant for deres specifikke enhedstype. Dette kan forbedre indlæsningstider og reducere båndbreddeforbrug, hvilket er en stor fordel for mobilbrugere med begrænset data eller langsomme forbindelser.

Andre anvendelser i Node.js omfatter:

  • Logging af enhedsstatistikker for at forstå din målgruppes demografi bedre.
  • Tilpasning af API-svar baseret på klientens enhedstype.
  • Implementering af server-side rendering (SSR), hvor den indledende HTML genereres baseret på den detekterede enhed.
  • Sikkerhedsforanstaltninger, der differentierer adgang baseret på enhedstype.

Sådan fungerer isMobile

Mekanismen bag isMobile er bemærkelsesværdigt enkel og effektiv, hvilket bidrager til dens minimale ydeevnepåvirkning. Kernen i dets funktionalitet er analyse af brugeragentstrengen (User-Agent), som er en tekststreng, der sendes af browseren eller klienten til webserveren for at identificere sig selv.

I browseren

Når en webside indlæses, kører isMobile-scriptet lynhurtigt for at analysere den globale navigator.userAgent streng fra browseren. Baseret på denne analyse opretter den et JavaScript-objekt, typisk navngivet isMobile, som indeholder en række boolean-værdier (sandt/falsk). Disse værdier indikerer, hvilken type enhed der er blevet detekteret. For eksempel vil isMobile.apple.phone være true, hvis en iPhone er detekteret, og isMobile.android.tablet vil være true for en Android-tablet. Denne proces er designet til at være ikke-blokerende for den resterende sideindlæsning, medmindre du aktivt bruger resultaterne til en øjeblikkelig omdirigering.

På server-siden (Node.js)

I et Node.js-miljø importerer du isMobile-funktionen og kalder den ved at sende en brugeragentstreng som argument. Dette er typisk den User-Agent-header, du modtager i en HTTP-anmodning (f.eks. req.headers['user-agent'] i Express.js). Funktionen returnerer derefter et JavaScript-objekt med de samme detektionsresultater som i browseren, hvilket gør det nemt at genbruge logikken på tværs af klient- og server-siden. Denne ensartethed i API'et forenkler udviklingen og sikrer konsistente resultater.

Understøttede Enhedstyper

isMobile er designet til at identificere et bredt spektrum af mobile enheder og kategorisere dem på en overskuelig måde. Nedenfor finder du en oversigt over de enhedstyper, som biblioteket kan detektere, og hvordan de grupperes i det returnerede objekt. Denne detaljerede opdeling giver dig mulighed for at målrette specifikke enhedskategorier med stor præcision.

KategoriEgenskab (Dansk)Egenskab (Engelsk)Beskrivelse
Apple-enhederTelefonisMobile.apple.phoneiPhone
iPodisMobile.apple.ipodiPod Touch
TabletisMobile.apple.tabletiPad (ikke iPhone)
UniversalisMobile.apple.universaliOS Universal App (f.eks. på Mac, men kører iOS-app)
Enhver Apple-enhedisMobile.apple.deviceEnhver mobil Apple-enhed (telefon, iPod, tablet, universal)
Android-enhederTelefonisMobile.android.phoneAndroid-telefon
TabletisMobile.android.tabletAndroid-tablet (ikke telefon)
Enhver Android-enhedisMobile.android.deviceEnhver mobil Android-enhed (inkl. OkHttp user agents)
Amazon Silk-enhederTelefonisMobile.amazon.phoneAmazon Silk-telefon (passerer også Android-tjek)
TabletisMobile.amazon.tabletAmazon Silk-tablet (passerer også Android-tjek)
Enhver Amazon Silk-enhedisMobile.amazon.deviceEnhver mobil Amazon Silk-enhed
Windows-enhederTelefonisMobile.windows.phoneWindows Phone
TabletisMobile.windows.tabletWindows ARM-baseret tablet
Enhver Windows-enhedisMobile.windows.deviceEnhver mobil Windows-enhed
Andre enhederBlackBerry 10isMobile.other.blackberry10BlackBerry 10
BlackBerryisMobile.other.blackberryÆldre BlackBerry-enheder
Opera MiniisMobile.other.operaOpera Mini-browser
FirefoxisMobile.other.firefoxFirefox Mobile
ChromeisMobile.other.chromeChrome Mobile (inkl. Chrome iOS - CriOS)
Enhver "anden" enhedisMobile.other.deviceEnhver af ovenstående "andre" enheder

Aggregerede Grupperinger

Ud over de specifikke enhedskategorier tilbyder isMobile også praktiske aggregerede grupperinger, der forenkler generelle tjek. Disse er særligt nyttige, når du har brug for at reagere på en bredere kategori af enheder uden at skulle tjekke hver enkelt underkategori:

  • isMobile.any: Denne egenskab er true, hvis enhver mobil enhed er matchet. Dette er den mest generelle kontrol og ofte den, du vil bruge, hvis du blot vil vide, om brugeren er på en mobil enhed af en art.
  • isMobile.phone: Denne egenskab er true, hvis en telefon (uanset mærke) er matchet. Den aggregerer resultaterne fra apple.phone, android.phone, windows.phone og amazon.phone.
  • isMobile.tablet: Denne egenskab er true, hvis en tablet (uanset mærke) er matchet. Den aggregerer resultaterne fra apple.tablet, android.tablet, windows.tablet og amazon.tablet.

Anvendelse

At integrere isMobile i dit projekt er ligetil, uanset om du arbejder med moderne JavaScript-moduler eller traditionelle browser-scripts. Her er de mest almindelige måder at komme i gang på:

Installation

For Node.js-projekter eller moderne frontend-buildsystemer kan du installere isMobile via npm eller yarn:

yarn add ismobilejs

eller

npm install ismobilejs

Brug i Node.js

Efter installation kan du importere isMobile i din Node.js-applikation og bruge den til at detektere enheder baseret på User-Agent-strengen fra indgående anmodninger:

import isMobile from 'ismobilejs';
const userAgent = req.headers['user-agent'];
console.log(isMobile(userAgent).any); // Returnerer true eller false

Her tjekker vi, om anmodningen kommer fra en mobil enhed ved at inspicere User-Agent-headeren, som typisk er tilgængelig i request-objektet i webframeworks som Express.js.

Brug i browseren

For at opnå den mest præcise detektion i browseren, især for iPads på iOS 13 og nyere (som kan præsentere sig som Mac-enheder), bør du sende et window.navigator-lignende objekt, der inkluderer userAgent, platform og maxTouchPoints:

import isMobile from 'ismobilejs';
console.log(isMobile(window.navigator).apple.tablet); // true hvis det er en iPad

Dette sikrer, at biblioteket kan differentiere mellem en desktop Mac med touchskærm og en iPad, der præsenterer sig som en Mac for at undgå detektion, og dermed levere mere præcise resultater.

Real-world eksempel i browseren (Inline i <head>)

Det følgende eksempel viser, hvordan isMobile kan bruges til at omdirigere mobilbrugere til en dedikeret mobilside. Scriptet er indlejret (inline) direkte i HTML'ens <head> for at sikre lynhurtig eksekvering, før resten af siden indlæses. Dette er den anbefalede metode for kritiske, tidlige detektioner som f.eks. omdirigeringer.

<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="utf-8" />
<script>
 // Minificeret version af isMobile inkluderet inline for hurtig eksekvering
 (function(){var a={};var f=/iPhone/i,h=/iPod/i,i=/iPad/i,r=/\biOS-universal(?:.+)?Mac\b/i,g=/\bAndroid(?:.+)?Mobile\b/i,j=/Android/i,c=/(?:SD4930UR|\bSilk(?:.+)?Mobile\b)/i,d=/Silk/i,b=/Windows Phone/i,k=/\bWindows(?:.+)?ARM\b/i,m=/BlackBerry/i,n=/BB10/i,o=/Opera Mini/i,p=/\b(CriOS|Chrome)(?:.+)?Mobile/i,q=/Mobile(?:.+)?Firefox\b/i;function s(l){return function($){return $.test(l)}}function e(l){var $=(l=l||("undefined"!=typeof navigator?navigator.userAgent:"")).split("[FBAN");void 0!==$[1]&&(l=$[0]),void 0!==(l=$.split("Twitter"))[1]&&(l=$[0]);var a=s(l),e={apple:{phone:a(f)&&!a(b),ipod:a(h),tablet:!a(f)&&a(i)&&!a(b),universal:a(r),device:(a(f)||a(h)||a(i))&&!a(b)},amazon:{phone:a(c),tablet:!a(c)&&a(d),device:a(c)||a(d)},android:{phone:!a(b)&&a(c)||!a(b)&&a(g),tablet:!a(b)&&!a(c)&&!a(g)&&(a(d)||a(j)),device:!a(b)&&(a(c)||a(d)||a(g)||a(j))||a(/\bokhttp\b/i)},windows:{phone:a(b),tablet:a(k),device:a(b)||a(k)},other:{blackberry:a(m),blackberry10:a(n),opera:a(o),firefox:a(q),chrome:a(p),device:a(m)||a(n)||a(o)||a(q)||a(p)}},any:!1,phone:!1,tablet:!1};return e.any=e.apple.universal||e.apple.device||e.android.device||e.windows.device||e.other.device,e.phone=e.apple.phone||e.android.phone||e.windows.phone,e.tablet=e.apple.tablet||e.android.tablet||e.windows.tablet,e}a=e();if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=a}else if(typeof define==="function"&&define.amd){define(function(){return a})}else{this["isMobile"]=a}}})();
 // Mit eget eksempel på brug af isMobile til omdirigering
 (function() {
 var MOBILE_SITE = '/mobil/index.html', // Din mobilside
 NO_REDIRECT = 'noredirect'; // Cookie til at forhindre omdirigering
 // Omdiriger kun iPhones og Android-telefoner
 if (isMobile.apple.phone || isMobile.android.phone) {
 // Omdiriger kun hvis brugeren ikke tidligere har valgt
 // at se den fulde side. Dette valideres
 // ved at tjekke, om en "noredirect" cookie eksisterer
 if (document.cookie.indexOf(NO_REDIRECT) === -1) {
 document.location = MOBILE_SITE;
 }
 }
 })();
</script>
</head>
<body>
 <!-- forestil dig masser af html og indhold her -->
</body>
</html>

Dette snippet viser, hvordan en hurtig og betinget omdirigering kan implementeres, før browseren begynder at parse og rendere resten af dokumentet. Dette er især kritisk på langsomme mobilforbindelser, hvor hvert millisekund tæller.

What happens when you build a hybrid app with typescript?
When you build a hybrid app with TypeScript and a framework like React Native or Expo, here’s what happens: Your TypeScript code is converted to JavaScript code using the TypeScript compiler. The JavaScript code is then compiled to native code for the target platform (iOS or Android).

Brug via jsDelivr CDN

En endnu simplere måde at inkludere isMobile på, hvis du ikke har brug for det inline, er via et CDN (Content Delivery Network). Dette er ideelt for hurtig prototyping eller i projekter, hvor du foretrækker at hente biblioteker eksternt:

<script src="https://cdn.jsdelivr.net/npm/ismobilejs@1/dist/isMobile.min.js"></script>

Husk altid at tjekke jsDelivr-siden for den nyeste version af URL'en for at sikre, at du bruger den mest opdaterede version af biblioteket.

Manuel bygning af biblioteket

For udviklere, der ønsker fuld kontrol eller bidrage til projektet, kan isMobile-biblioteket bygges manuelt fra kildekoden. Dette kræver, at du har Node.js og Yarn (eller npm) installeret på dit system.

Efter at have klonet repository'et fra GitHub, skal du først installere alle de nødvendige afhængigheder:

yarn install

Derefter kan du bygge biblioteket ved at køre følgende kommando:

yarn build

Dette vil generere tre forskellige versioner af biblioteket, der er optimeret til forskellige miljøer:

  • ./cjs/index.js: CommonJS-versionen af biblioteket, primært beregnet til brug i Node.js-miljøer.
  • ./esm/index.js: ESModule-versionen af biblioteket, velegnet til moderne JavaScript-projekter, der bruger ES-moduler.
  • ./dist/isMobile.min.js: Browserversionen af biblioteket, som er minificeret og klar til direkte brug på websider. Denne version er den, du typisk vil inkludere via et <script>-tag.

Desuden genereres TypeScript-typer i types-mappen. Dette er en stor fordel for udviklere, der bruger TypeScript, da det forbedrer kodekvaliteten, giver bedre autokomplettering og hjælper med at fange potentielle fejl under udviklingen.

isMobile i kontekst: Bibliotek vs. Framework

Det er vigtigt at skelne mellem et JavaScript-bibliotek som isMobile og et fuldgyldigt JavaScript-mobilframework. Hvor isMobile er et letvægtsbibliotek designet til én specifik opgave – nemlig enhedsdetektion – er et mobilframework en omfattende samling af værktøjer, der giver en struktureret ramme for udvikling af hele mobilapplikationer.

JavaScript-mobilframeworks, som f.eks. React Native, Vue Native, Ionic eller tidligere eksempler som ChocolateChip Mobile og Mobilize.js, tilbyder typisk:

  • Cross-platform kompatibilitet: Mulighed for at bygge applikationer, der kører på tværs af iOS, Android og andre mobile platforme fra en enkelt kodebase.
  • Optimering til touchskærme: Indbyggede komponenter og interaktioner, der er skræddersyet til touchbaserede grænseflader, herunder gestusgenkendelse og animationer.
  • Brug af HTML5 og CSS3-standarder: Udnyttelse af webstandarder til at skabe native-lignende oplevelser i en browserkontekst (hybrid-apps) eller til at kompilere til ægte native-kode.
  • Rige komponentbiblioteker: Færdige UI-komponenter, der efterligner native-app-udseende og -funktionalitet.
  • State management og routing: Indbyggede løsninger til at håndtere applikationens tilstand og navigation mellem skærme.

isMobile supplerer disse frameworks ved at give dem mulighed for at tilpasse sig yderligere baseret på den specifikke enhedstype, når standard responsivt design eller framework-specifikke tilpasninger ikke er tilstrækkelige. Det er et specialiseret værktøj, der løser et specifikt problem, snarere end en altomfattende løsning til mobiludvikling.

Ofte Stillede Spørgsmål om isMobile

Her finder du svar på nogle af de mest almindelige spørgsmål vedrørende brugen og funktionaliteten af isMobile-biblioteket.

Q: Er responsivt design ikke tilstrækkeligt til de fleste mobilbehov?

A: Ja, for langt de fleste tilfælde er responsivt design den bedste og mest effektive tilgang. Det sikrer, at dit indhold og layout tilpasser sig alle skærmstørrelser, uanset enhedstype. isMobile er primært designet til specifikke "edge cases", hvor du har brug for at differentiere baseret på enhedstypen – for eksempel til omdirigering til en dedikeret mobilside, sporing af enhedstype i analyseværktøjer, eller levering af enheds-specifikt indhold på server-siden. Det er et supplement, ikke en erstatning, for responsivt design.

Q: Hvorfor anbefales det at placere isMobile-scriptet i <head>-sektionen?

A: Når scriptet bruges til hurtig omdirigering til en mobilside, er det afgørende, at det eksekveres så tidligt som muligt i sidens indlæsningsproces. Ved at placere det i <head> sikrer du, at omdirigeringen sker, før browseren har brugt unødvendige ressourcer på at downloade og rendere den fulde desktop-version af siden. Dette sparer båndbredde og tid for mobilbrugere, som ofte har langsommere forbindelser. For ikke-mobile enheder er scriptets minimale størrelse og hurtige eksekvering med til at minimere eventuel blokering af rendering.

Q: Kan isMobile detektere specifikke browserversioner eller operativsystemversioner?

A: isMobile fokuserer primært på at detektere enhedstypen (telefon, tablet, etc.) og operativsystemets familie (Apple iOS, Android, Windows, etc.) baseret på brugeragentstrengen. Det er ikke designet til at give detaljerede oplysninger om specifikke browserversioner (f.eks. Chrome 100 vs. Chrome 101) eller præcise OS-versionsnumre (f.eks. iOS 15.1 vs. iOS 15.2). Til mere granulær browser- og OS-detektion skal du muligvis bruge andre biblioteker, der er specialiseret i brugeragent-parsing, eller implementere din egen parseringslogik.

Q: Er isMobile kun til brug i webbrowsere?

A: Nej, absolut ikke! isMobile er bygget til at fungere både i browseren (client-side) og i Node.js-miljøer (server-side). Dette gør det utrolig fleksibelt og alsidigt. I Node.js kan du bruge det til server-side detektion, hvilket kan være fordelagtigt for at optimere bandbredde, tilpasse API-svar eller implementere server-side logik baseret på klientens enhedstype, før indholdet overhovedet sendes til browseren.

Q: Hvor ofte bliver isMobile vedligeholdt og opdateret?

A: Selvom den angivne information ikke specificerer en fast opdateringsfrekvens, indikerer tilstedeværelsen af en "Contributing"-sektion og brugen af moderne byggeprocesser (som Spotify's web-scripts) en aktiv tilgang til vedligeholdelse. Dette er vigtigt, da brugeragentstrenge og enhedsidentifikationer kan ændre sig over tid med nye enheder og browsere, hvilket kræver løbende opdateringer for at sikre nøjagtighed og relevans.

Samlet set er isMobile et uundværligt værktøj i værktøjskassen for enhver webudvikler, der ønsker at tilbyde en mere raffineret og optimeret brugeroplevelse på mobile enheder. Dets enkelhed, lette vægt og alsidighed gør det til et fremragende valg for specifikke detektionsbehov, der går ud over traditionelt responsivt design. Ved at give dig præcis information om brugerens enhedstype, muliggør isMobile skræddersyede løsninger, der kan forbedre både ydeevne og brugertilfredshed markant.

Hvis du vil læse andre artikler, der ligner isMobile: Optimer Din Mobiloplevelse, kan du besøge kategorien Mobilteknologi.

Go up