30

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?

1

9 Answers 9

41

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);
}

1
  • 4
    navigator.platform is now deprecated Jun 20, 2022 at 7:44
28
+50

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.

1
  • 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, 2019 at 14:09
16

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

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

You can use Regular Expression for this.

var isIPadPro = /Macintosh/.test(navigator.userAgent) && 'ontouchend' in document;
1
  • 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. May 5, 2022 at 16:01
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/

3
  • This is a hack? Sep 10, 2019 at 5:16
  • 3
    What about split screen use? Apr 9, 2020 at 16:15
  • Also, this will no longer work starting with iPadOS 16, when Stage Manager is in use.
    – Michal M
    Oct 31, 2022 at 21:45
2

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

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
1

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>
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.