Detekce iOS zařízení v JavaScriptu

V dnešním digitálním světě je klíčové, aby se webové stránky a aplikace přizpůsobily rozmanitosti zařízení a operačních systémů, které uživatelé používají. Optimalizace uživatelského zážitku je zásadní, a proto je schopnost detekovat operační systém uživatele neocenitelná. Obzvláště užitečné je to v případě zařízení s iOS, jako jsou iPhony, iPady nebo iPody, která mají často jedinečné možnosti a omezení, vyžadující specifické úpravy obsahu a funkcionality.

Proč je detekce iOS zařízení tak důležitá? Existuje několik scénářů, kde je tato znalost velmi přínosná:

• Úpravy responzivního designu: iOS zařízení mají specifické vlastnosti zobrazení, jako je například výřez (notch) na iPhonech nebo určitá omezení velikosti výřezu (viewport). Detekce iOS umožňuje přizpůsobit design tak, aby vypadal a fungoval dokonale na těchto zařízeních, což zajišťuje bezchybnou vizuální prezentaci.
• Dotykové události: iOS zařízení se ve velké míře spoléhají na dotykové události. Upravení interakcí pro lepší uživatelský zážitek na dotykových obrazovkách je proto nezbytné. Můžete například implementovat specifické gesta nebo zjemnit reakce na dotyk.
• Detekce funkcí: Některé funkce, například chování prohlížeče Safari na iOS, se mohou lišit od jiných prohlížečů nebo zařízení. Může být nutné upravit chování aplikace na základě operačního systému, aby byl zajištěn plynulý a konzistentní zážitek pro uživatele. To je obzvláště důležité při práci s API, jako je například YouTube API, které se na iPhonech a iPadech může chovat odlišně.

Běžné metody detekce iOS zařízení v JavaScriptu

Existuje několik spolehlivých metod, jak zjistit, zda uživatel prochází vaši aplikaci z iOS zařízení. Pojďme se podívat na ty nejpoužívanější.

Metoda 1: Využití vlastnosti navigator.userAgent

Nejběžnější přístup k detekci iOS zařízení spočívá v prozkoumání vlastnosti navigator.userAgent. Tato vlastnost poskytuje podrobné informace o prohlížeči, operačním systému a typu zařízení. Pro iOS zařízení bude tento řetězec obsahovat slova „iPhone“, „iPad“ nebo „iPod“. Jedná se o historicky nejstarší a nejčastěji používanou metodu, i když s příchodem iPadOS 13 se její spolehlivost mírně snížila, jak si povíme později.

Zde je jednoduchý JavaScriptový kód, který detekuje, zda zařízení běží na iOS:

var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; if (isIOS) { console.log('Toto je iOS zařízení'); } else { console.log('Toto NENÍ iOS zařízení'); }

V tomto kódu proměnná isIOS vrátí true, pokud se jedná o iOS zařízení, a false, pokud ne. Pojďme si to rozebrat:

• navigator.userAgent: Tato vlastnost obsahuje řetězec, který reprezentuje identitu prohlížeče. Zahrnuje podrobnosti o prohlížeči a operačním systému. Je to v podstatě vizitka, kterou prohlížeč odesílá serveru při každém požadavku.
• /iPad|iPhone|iPod/: Toto je regulární výraz. Regulární výrazy jsou mocné nástroje pro hledání vzorů v textových řetězcích. V tomto případě hledáme, zda řetězec navigator.userAgent obsahuje klíčová slova „iPad“, „iPhone“ nebo „iPod“. Znak svislé čáry | funguje jako logické „OR“, což znamená, že se shoda najde, pokud je přítomno kterékoli z těchto slov. Tato slova jsou jedinečná pro iOS zařízení, což z nich činí dobrý indikátor.
• .test(): Toto je metoda regulárního výrazu, která vrací true, pokud najde shodu v zadaném řetězci, a false, pokud ne.
• !window.MSStream: Tato část je velmi důležitá pro zajištění přesnosti detekce. Proč je vyloučeno window.MSStream? Společnost Microsoft vložila slovo „iPhone“ do User-Agentu prohlížeče IE11 ve snaze oklamat Gmail. Bez této kontroly byste mohli omylem detekovat Internet Explorer 11 jako iOS zařízení. Vyloučením window.MSStream se vyhneme tomuto falešně pozitivnímu výsledku.

Metoda 2: Využití vlastnosti navigator.platform

Podobně jako navigator.userAgent, lze vlastnost navigator.platform použít k detekci podkladové platformy. Pro iOS bude platforma často jedna z následujících: „iPhone“, „iPad“ nebo „iPod“. Tato metoda je často považována za mírně spolehlivější pro detekci typu zařízení, protože je méně náchylná k různým úpravám prohlížečů, i když není zcela imunní.

Zde je JavaScriptový kód, který detekuje, zda zařízení běží na iOS pomocí navigator.platform:

var isIOS = /iPad|iPhone|iPod/.test(navigator.platform) && !window.MSStream; if (isIOS) { console.log('Toto je iOS zařízení'); } else { console.log('Toto NENÍ iOS zařízení'); }

Jak vidíte, kód je téměř identický s předchozí metodou, pouze místo navigator.userAgent používáme navigator.platform. Opět platí, že !window.MSStream je zde pro vyloučení falešných pozitiv z prohlížeče Internet Explorer.

Výzvy s iOS 13 a iPadOS: Jak detekovat novější zařízení

S příchodem iOS 13 a zejména iPadOS se krajina detekce iOS zařízení výrazně změnila. Dříve spolehlivé metody založené na navigator.userAgent a navigator.platform začaly narážet na problémy, zejména u iPadů. Důvodem je, že iPad s iOS 13 (a novějším iPadOS) může odesílat User-Agent řetězec, který je identický s tím, který používá počítač s macOS. To bylo učiněno s cílem zlepšit kompatibilitu iPadů s webovými stránkami, které dříve omezovaly funkčnost pro mobilní zařízení. Proto je nezbytné přijmout aktualizované metody.

Metoda 3: Přímá detekce iOS zařízení s podporou iPadOS 13+

Tato metoda představuje robustnější přístup, který zohledňuje změny v iOS 13 a iPadOS. Kombinuje kontrolu navigator.platform s dodatečnou kontrolou pro iPady, které se maskují jako Macy.

function isIOSDevice() { return [ 'iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod' ].includes(navigator.platform) || (navigator.userAgent.includes("Mac") && "ontouchend" in document); } // Použití if (isIOSDevice()) { console.log("Toto zařízení běží na iOS."); } else { console.log("Toto zařízení NENÍ iOS."); }

Pojďme si rozkódovat tuto funkci, která vrátí true, pokud zařízení odpovídá specifikovaným kritériím, a false jinak:

• ['iPad Simulator', ..., 'iPod'].includes(navigator.platform): Tato část kontroluje, zda navigator.platform odpovídá některému ze známých řetězců pro iOS zařízení, včetně simulátorů. Toto pokrývá většinu starších i novějších iOS zařízení.
• navigator.userAgent.includes("Mac") && "ontouchend" in document: Toto je klíčová část pro detekci iPadů s iPadOS 13+. Jak již bylo zmíněno, iPad s iPadOS se může hlásit jako Mac (navigator.userAgent.includes("Mac")). Nicméně, na rozdíl od skutečného Macu, iPad má dotykovou obrazovku. Kontrola "ontouchend" in document ověřuje přítomnost dotykových událostí. Pokud je User-Agent „Mac“ a zařízení podporuje dotykové události, je vysoce pravděpodobné, že se jedná o iPad s iPadOS.

Metoda 4: Detekce novějšího iOS zařízení (iPadOS)

Pro ještě specifičtější detekci iPadOS a novějších iOS zařízení, které mohou být vybaveny pokročilými schopnostmi (například podpora Apple Pencil), můžeme použít následující metodu, která zohledňuje více dotykových bodů.

function isNewIOS() { return ( /iPad|iPhone|iPod/.test(navigator.platform) || ( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ) ) && !window.MSStream; } // Použití if (isNewIOS()) { console.log("Detekováno novější iOS zařízení (iPadOS)."); } else { console.log("Není detekováno novější iOS zařízení."); }

Tato metoda zohledňuje schopnosti novějších iPadů, které by se mohly hlásit jako macOS User-Agent řetězce a zároveň stále podporují dotykové interakce. Klíčový je zde navigator.maxTouchPoints > 1, který indikuje vícenásobné dotykové body, což je typické pro tablety.

Detekce verze iOS

Nejběžnější způsob detekce verze iOS je parsování z řetězce User-Agent. Existuje však také inferenční detekce funkcí, která je obecně spolehlivější a doporučovanější. Víme, že například History API bylo zavedeno v iOS 4, matchMedia API v iOS 5, webAudio API v iOS 6, WebSpeech API v iOS 7 a tak dále. Můžeme tedy odvodit verzi iOS na základě dostupnosti těchto funkcí.

Upozornění: Následující kód není absolutně spolehlivý a může se „rozbít“, pokud některá z těchto HTML5 funkcí bude v novější verzi iOS zrušena nebo změněna. Byli jste varováni!

function getIOSVersion() { if (isIOSDevice()) { if (window.indexedDB) return 'iOS 8 a novější'; if (window.SpeechSynthesisUtterance) return 'iOS 7'; if (window.webkitAudioContext) return 'iOS 6'; if (window.matchMedia) return 'iOS 5'; if (window.history && 'pushState' in window.history) return 'iOS 4'; return 'iOS 3 nebo starší'; } return 'Není iOS zařízení'; } // Použití console.log(getIOSVersion());

Tato funkce nejprve ověří, zda se jedná o iOS zařízení (pomocí naší dříve definované isIOSDevice()), a poté postupně kontroluje dostupnost určitých JavaScriptových API. První API, které najde a které je pro danou verzi iOS specifické, určí odhadovanou verzi. Je důležité si uvědomit, že to není přímá detekce verze, ale spíše odhad založený na funkcích.

Alternativní přístupy a důležité upozornění

Namísto spoléhání se pouze na detekci zařízení zvažte implementaci detekce funkcí (feature detection) pro kritické funkcionality vyžadované ve vaší aplikaci. Tato strategie minimalizuje šanci na falešně pozitivní výsledky a může nabídnout uživatelsky přívětivější zážitek bez ohledu na zařízení. Proč je to lepší?

• Spolehlivost: Řetězce User-Agent a Platform lze snadno zfalšovat uživatelem nebo rozšířeními prohlížeče. Webové stránky často používají příliš agresivní detekci a často zakazují některé funkce, i když by prohlížeč uživatele jinak mohl tuto funkci použít.
• Přesnost: Detekce funkcí se ptá přímo: „Má tento prohlížeč tuto konkrétní funkci, kterou potřebuji?“ Namísto: „Je tento prohlížeč iOS zařízení, které by mělo mít tuto funkci?“
• Budoucnost: Když se objeví nové prohlížeče nebo verze OS, které podporují vaši funkci, vaše aplikace bude fungovat automaticky, aniž byste museli aktualizovat detekční logiku.

Příklad detekce funkcí pro přehrávání videa na iOS (kde je často potřeba uživatelská interakce pro spuštění):

// Detekce, zda prohlížeč vyžaduje uživatelskou interakci pro přehrávání videa var requiresUserInteraction = (function() { var video = document.createElement('video'); return typeof video.play === 'function' && video.autoplay === false; })(); if (requiresUserInteraction) { console.log('Pro přehrávání videa je vyžadována uživatelská interakce.'); } else { console.log('Video se může přehrávat automaticky.'); }

Tento přístup je mnohem robustnější, protože se zaměřuje na to, co prohlížeč skutečně umí, nikoli na to, co se o sobě hlásí.

Porovnání metod detekce iOS

Fungují JavaScriptové funkce detekce zařízení na starších chytrých telefonech?

Ano, JavaScriptové funkce pro detekci zařízení, jako jsou ty založené na navigator.userAgent a navigator.platform, fungují i na starších chytrých telefonech. Tyto vlastnosti prohlížeče jsou součástí standardního webového API a byly přítomny v mobilních prohlížečích po mnoho let. V případě starších iOS zařízení jsou dokonce tyto metody často spolehlivější, protože se vyhýbají složitostem zavedeným iPadOS 13 (jako je maskování iPadu za Mac).

Pro scénáře, jako je přistávací stránka s QR kódem pro stažení aplikace, kde potřebujete detekovat operační systém (Apple/Android/jiný) a navrhnout nejlepší verzi aplikace, jsou tyto JavaScriptové metody velmi vhodné. Můžete je použít k přesměrování uživatele na správný obchod s aplikacemi (App Store pro iOS, Google Play pro Android) nebo k zobrazení specifických pokynů. I když se můžete setkat s „ošklivými“ řetězci User-Agent na velmi starých zařízeních nebo méně běžných OS, pro drtivou většinu uživatelů iOS budou výše uvedené metody fungovat spolehlivě.

Doporučuje se kombinovat tyto techniky s robustním zpracováním chyb a případně i záložními řešeními, pokud detekce selže (např. nabídnout uživateli výběr platformy ručně). Důležité je také myslet na to, že User-Agent a Platform mohou být změněny uživatelem nebo rozšířením prohlížeče, takže se na ně nespoléhejte pro bezpečnostní nebo kritické funkce.

Často kladené otázky o detekci iOS zařízení pomocí JavaScriptu

Q: Jaká je nejlepší metoda pro detekci iOS zařízení?

A: Nejlepší metoda vyvažuje spolehlivost a uživatelský zážitek. Použití detekce funkcí spolu s přímými kontrolami iOS (jako je funkce isIOSDevice()) je obvykle nejúčinnější přístup. Zaměřte se na to, co prohlížeč umí, nikoli na to, co se o sobě hlásí.

Q: Proč se nedoporučuje spoléhat se pouze na User-Agent sniffing?

A: User-Agent sniffing může vést k nespolehlivým výsledkům, protože řetězce User-Agent mohou být snadno zfalšovány uživateli nebo rozšířeními prohlížeče. To může potenciálně způsobit nesprávné chování vaší aplikace nebo omezit funkce pro uživatele, jejichž prohlížeč by je jinak podporoval.

Q: Je detekce verze iOS pomocí funkcí spolehlivá?

A: Je to spíše odhad než přesná detekce. Zatímco může poskytnout užitečné vodítko, není 100% spolehlivá a může se „rozbít“, pokud se v budoucích verzích iOS změní chování nebo dostupnost detekovaných funkcí. Pro kritické funkce se vždy spoléhejte na přímou detekci funkcí.

Q: Co je třeba zohlednit při detekci iOS na starších chytrých telefonech?

A: Na starších zařízeních by metody založené na User-Agent a Platform měly fungovat dobře, protože se vyhýbají složitostem novějších iPadOS. Vždy je však dobré testovat na široké škále zařízení a verzí OS, aby se zajistila kompatibilita a spolehlivost.

Chceš-li si přečíst další články podobné jako Detekce iOS zařízení v JavaScriptu, navštiv kategorii iPhone.