isIOS
Checks if the current platform is iOS.
1/**
2 * Checks if the current platform is iOS.
3 *
4 * @returns True if running on iOS, false otherwise.
5 */
6export function isIOS(): boolean {
7 if (typeof navigator === 'undefined' || typeof window === 'undefined') {
8 return false;
9 }
10
11 return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
12 (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
13}
Accurate iOS Detection
Combines multiple heuristics to reliably detect iOS, including touch-enabled Macs which report as "Mac" but behave like iPads.
Cross-Browser Compatibility
Avoids reliance on deprecated properties and instead uses resilient checks across modern Safari/WebKit environments.
Safe Environment Check
Guards against server-side rendering or non-browser environments by verifying
navigator
andwindow
.Touchscreen Support Awareness
Recognizes iPadOS 13+ devices that identify as "Mac" but are touchscreen-enabled.
Tests | Examples
1const originalUserAgent = navigator.userAgent;
2const originalTouchSupport = 'ontouchend' in document;
3
4afterEach(() => {
5 Object.defineProperty(navigator, 'userAgent', {
6 value: originalUserAgent,
7 configurable: true,
8 });
9});
10
11test('returns true for iPhone user agent', () => {
12 Object.defineProperty(navigator, 'userAgent', {
13 value: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)',
14 configurable: true,
15 });
16 expect(isIOS()).toBe(true);
17});
18
19test('returns true for iPad user agent', () => {
20 Object.defineProperty(navigator, 'userAgent', {
21 value: 'Mozilla/5.0 (iPad; CPU OS 14_0 like Mac OS X)',
22 configurable: true,
23 });
24 expect(isIOS()).toBe(true);
25});
26
27test('returns false for Android user agent', () => {
28 Object.defineProperty(navigator, 'userAgent', {
29 value: 'Mozilla/5.0 (Linux; Android 10; SM-G970F)',
30 configurable: true,
31 });
32 expect(isIOS()).toBe(false);
33});
34
35test('returns false when navigator or window is undefined', () => {
36 const tempWindow = globalThis.window;
37 const tempNavigator = globalThis.navigator;
38
39 // Simulate non-browser environment
40 delete (globalThis as any).window;
41 delete (globalThis as any).navigator;
42
43 expect(isIOS()).toBe(false);
44
45 // Restore environment
46 (globalThis as any).window = tempWindow;
47 (globalThis as any).navigator = tempNavigator;
48});
Common Use Cases
iOS-Specific Workarounds
Apply platform-specific CSS or JS fixes for known Safari/iOS limitations (e.g., viewport issues, keyboard behavior).
Conditional Feature Enablement
Enable or disable features like file uploads, clipboard access, or motion APIs depending on iOS support.
Custom UI Tweaks
Adjust spacing, gestures, or interface behaviors specifically for iPhones or iPads.
Analytics and Telemetry
Log user platform for usage metrics or platform-specific debugging.