Nanfeng

Notes on software development, code, and curious ideas

Detect iOS and iPadOS in Frontend Code: User Agent, MacIntel and Touch

In
Detect iPhones and modern iPads that report MacIntel by combining user-agent, navigator.platform, and maxTouchPoints checks in frontend code.

Introduction

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

Why User-Agent Checks Miss iPadOS

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.

+