Distinguish between iPad and mac on iPad with iPadOs

Question

In iOS 13 apple changed the user-agent that iPad uses.

Instead of (for example)

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

it become (for example)

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15

My question is how can we distinguish between iPad and mac now?

Answer 1

The condition I used to detect IpadOS:

ua.toLowerCase().indexOf('macintosh') > -1 && navigator.maxTouchPoints && navigator.maxTouchPoints > 2

Answer 2

Unfortunately doing so via the User-Agent string alone doesn't seem to be possible anymore. This is a bit of an issue if you're server-side and need to share downloads differently as you mentioned in one of your comments.

However, the below should reliably detect iPads on the client-side:

const iPad = !!(navigator.userAgent.match(/(iPad)/)
  || (navigator.platform === "MacIntel" && typeof navigator.standalone !== "undefined"))

It avoids relying on touch events which will occur on Macs with touch screen monitors, and instead uses navigator.standalone which is an iOS only property.

Answer 3

Combining quangh's answer and Michael Zaporozhets's answer to detect mobile devices including iPads.

detectMobile() {
  let isMobile = RegExp(/Android|webOS|iPhone|iPod|iPad/i)
   .test(navigator.userAgent);

  if (!isMobile) {
    const isMac = RegExp(/Macintosh/i).test(navigator.userAgent);

    if (isMac && navigator.maxTouchPoints && navigator.maxTouchPoints > 2) {
      isMobile = true;
    }
  }
  return isMobile;
}