CODEWITHSUNDEEP
javascriptiosios13ipados
Wonka
Wonka

Reputation: 8684

How to detect iPad Pro as iPad using javascript?

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?

Upvotes: 32

Views: 62910

Answers (9)

Sandeep Sherpur
Sandeep Sherpur

Reputation: 2802

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>

Upvotes: 1

bojo
bojo

Reputation: 399

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

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

Upvotes: 19

Lesha Petrov
Lesha Petrov

Reputation: 151

You can use Regular Expression for this.

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

Upvotes: 10

Steven Spungin
Steven Spungin

Reputation: 29169

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

Upvotes: 42

Vo Kim Nguyen
Vo Kim Nguyen

Reputation: 1643

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/

Upvotes: 4

paulrostorp
paulrostorp

Reputation: 45

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

Upvotes: 0

Eugene Berdnikov
Eugene Berdnikov

Reputation: 2200

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.

Upvotes: 31

Reza
Reza

Reputation: 3949

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

Upvotes: 2

Jonatan Cloutier
Jonatan Cloutier

Reputation: 929

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

Upvotes: 1

Related Questions