Detect iPad from Mac

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
) {
  // 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.

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

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