Nanfeng

Notes on software development, code, and curious ideas

Correctly Detecting iOS and iPadOS in Frontend Code

In
Detect modern iPads that identify themselves as MacIntel by combining user-agent, platform, and touch-point checks.

Introduction

Frontend projects sometimes need to identify the device type—for example, whether the visitor is using iOS or Android.

The problem with user-agent checks

Traditionally, an iOS check might inspect only the browser’s user agent:

1
/iPhone|iPad|iPod/i.test(navigator.userAgent);

This does not reliably identify newer iPads. Starting with iPadOS 13, an iPad can report its platform as MacIntel, causing it to be mistaken for a Mac.

Use a combined check instead:

1
2
3
4
5
6
7
8
9
10
function getDeviceType(): 'Android' | 'IOS' | 'unknown' {
    const ua = navigator.userAgent || navigator.vendor || (window as any).opera;
    const platform = (navigator as any).platform;
    const maxTouchPoints = navigator.maxTouchPoints;

    if (/android/i.test(ua)) return 'Android';
    if (/iPad|iPhone|iPod/.test(ua)) return 'IOS';
    if (platform === 'MacIntel' && maxTouchPoints > 1) return 'IOS';
    return 'unknown';
}

Although iPadOS 13 and later can identify the device as MacIntel, an iPad still supports multitouch. Checking navigator.maxTouchPoints > 1 distinguishes it from a typical Mac.

+