How to detect iPad Pro as iPad using javascript?

Question

We were able to detect an iPad device using javascript like this:

function isDeviceiPad(){
    return navigator.platform.match(/iPad/i);
}

That worked perfectly in detecting iPad devices, but when we checked from an iPad Pro (10.5 inch), it does not detect that it is an iPad.

To further investigate, we drilled down into the navigator object, checked both platform and userAgent, and got these results:

navigator.platform = 'MacIntel';
navigator.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) 
 AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15)';

The issue is that navigator.platform = 'MacIntel' (which is the same as the MacBook Pro) is returned instead of the iPad. We need a way to detect that this is an iPad and not a MacBook Pro, but it seems that the navigator does not return iPad like it does with older iPads.

Any idea how we can fix this issue?

Does this answer your question? [Tell iPadOS from macOS on the web](https://stackoverflow.com/questions/56578799/tell-ipados-from-macos-on-the-web) — igorsantos07, Jul 16 '22 at 03:49

score 39 · Answer 1 · answered Nov 21 '19 at 16:15

iPadPro reports navigator.platform the browser as 'MacIntel', but that is the same as other platforms.

Currently (2019) difference between iPadPro and the other platforms is that iPadPro is touch enabled.

Here are a couple of helpful methods.

function isIOS() {
  if (/iPad|iPhone|iPod/.test(navigator.platform)) {
    return true;
  } else {
    return navigator.maxTouchPoints &&
      navigator.maxTouchPoints > 2 &&
      /MacIntel/.test(navigator.platform);
  }
}

function isIpadOS() {
  return navigator.maxTouchPoints &&
    navigator.maxTouchPoints > 2 &&
    /MacIntel/.test(navigator.platform);
}

navigator.platform is now deprecated – Kevin Oswaldo Jun 20 '22 at 07:44 — Kevin Oswaldo, Jun 20 '22 at 07:44

score 27 · Accepted Answer · answered Sep 08 '19 at 00:40

27

I guess that iPad Pro is upgraded to iPadOS 13 Beta. Since Apple claimed Desktop-Class Browsing with Safari on iPadOS, it seems mobile Safari also mimics macOS behavior and user agent.

So, the short answer is it's not possible.

However you can try workarounds from answers to this question.

answered Sep 08 '19 at 00:40

Eugene Berdnikov

2,150
2
23
30

3

I think this makes the most sense. When detecting MacIntel, we'll check if it's a touch device or not, if it is then we'll know it's an iPad. This works for now but may not be future safe (when apple computers start becoming touchscreen) but for now this works as intended without relying on dimensions. Thank you for the links :) – Wonka Sep 11 '19 at 14:09

bojo · Answer 3 · 2020-10-27T17:33:09.500

14

Currently, in October 2020 the only way I know is:

(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0) || navigator.platform === 'iPad'

edited Oct 27 '20 at 17:33

answered Oct 27 '20 at 16:51

bojo

329
4
15

2

Detects Safari, Firefox, and Chrome on iPad at the time of this posting. – Jeff Clayton May 05 '22 at 15:45
This is the only solution I found which works on my iPad 6th Gen. Since platform is deprecated and navigator.userAgentData.platform is not supported on every browser yet , we should implement a different approach (see: https://erikmartinjordan.com/navigator-platform-deprecated-alternative) For testing purposes https://jsfiddle.net/riethmue/3w49t01d/16/ (works on my iPad 6th Gen) – riethmue Jun 18 '23 at 15:28

score 8 · Answer 4 · answered Jan 24 '20 at 10:21

8

You can use Regular Expression for this.

var isIPadPro = /Macintosh/.test(navigator.userAgent) && 'ontouchend' in document;

answered Jan 24 '20 at 10:21

Lesha Petrov

131
1
3

Detects Safari on iPad and Firefox (which on an iPad is a rebranded version of Safari if readers don't know) but does not detect Chrome on an iPad at the time of this posting. Add a check for CriOS in the UserAgent alongside Macintosh to include Chrome using this method. – Jeff Clayton May 05 '22 at 16:01

score 4 · Answer 5 · answered Sep 10 '19 at 04:59

4

You may use screen size to check it, iPad pro came with 2 different side. Detail implement bellow, modify it as your use case

function isIpadPro() {
    var ratio = window.devicePixelRatio || 1;
    var screen = {
        width : window.screen.width * ratio,
        height : window.screen.height * ratio
    };
    return (screen.width === 2048 && screen.height === 2732) || (screen.width === 2732 && screen.height === 2048) || (screen.width === 1536 && screen.height === 2048) || (screen.width === 2048 && screen.height === 1536);
}

Screen size reference: http://screensiz.es/

answered Sep 10 '19 at 04:59

Vo Kim Nguyen

1,613
10
14

This is a hack? – Mạnh Quyết Nguyễn Sep 10 '19 at 05:16
3

What about split screen use? – Cezary Daniel Nowak Apr 09 '20 at 16:15
Also, this will no longer work starting with iPadOS 16, when Stage Manager is in use. – Michal M Oct 31 '22 at 21:45

score 2 · Answer 6 · answered Sep 07 '19 at 12:27

The most easiest way to detect an "iPad Pro 10.5" device is through checking its screen size which is "window.screen.height x window.screen.width = 1112 x 834"

However, I am wondering why you need to detect the device model. In case you want to detect mobile browsers, take a look at this question: Detecting Mobile Browser

score 1 · Answer 7 · answered Sep 05 '19 at 21:01

1

You should be able to use the screen size to distinguish them. Thought you will need to find the real value for each iPad pro you want to detect.

window.screen.height
window.screen.width

answered Sep 05 '19 at 21:01

Jonatan Cloutier

899
9
26

score 0 · Answer 8 · answered Sep 09 '19 at 11:29

Capacitor has a useful web plugin to get device info (https://capacitor.ionicframework.com/docs/apis/device#example). It does not differentiate between iPad Pro and regular iPad, but then you could combine the use of this plugin with the screen size solutions proposed.

If you'd like to do this yourself, you can take a look at the code here: https://github.com/ionic-team/capacitor/blob/master/core/src/web/device.ts

Sandeep Sherpur · Answer 9 · 2022-11-23T08:32:53.983

It is possible.

You can use this function. This will also check a mac with a touch device (iPad 13).

<script type="text/javascript">

    if(iOS()){
        alert('iOS');
    }

    function iOS() {
            return [
                    'iPad Simulator',
                    'iPhone Simulator',
                    'iPod Simulator',
                    'iPad',
                    'iPhone',
                    'iPod'
                ].includes(navigator.platform)
                // iPad on iOS 13 detection
                ||
                (navigator.userAgent.includes("Mac") && "ontouchend" in document)
        }
</script>

How to detect iPad Pro as iPad using javascript?

9 Answers9

Linked