Detect iPad from Mac

June 26, 2021

It is increasingly difficult to detect iPad from Mac, how to implement specific for tablets?

if (
  window.navigator.userAgent.match('Macintosh') || // newer iPads (>iPadOS) send "Macintosh" in UA string
  window.navigator.userAgent.match('iPad')
) {
  // it's an iPad or a Mac
  // ...but which?
}

What is the intentional UI behind why we need to tell iPad from Mac anyway?

• touch screen: because :hover behaves differently, and for swiping gestures
• device orientation: people may be turning the iPads, less likely so for Mac

Detect touch screen

if (navigator.maxTouchPoints > 0) {
  // it's a touch device
}

This API is very stable and widely supported.

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/maxTouchPoints

Detect device orientation

A bit trickier because webkit doesn't yet support the screen.orientation API (experimental as of June 2021). We need to use the deprecated window.orientation API

• https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation
• https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

const isPortraitMode = screen.orientation
  ? screen.orientation.type.includes('portrait')
  : (window as any).orientation % 180 === 0;