How to detect iPhone X (Ionic - cordova app)

Question

I need to make some changes to my app but only for iPhone X.

The app is Apache Cordova based (with Ionic framework).

Is there a cordova plugin to detect the iPhone X? If the answer is no, which is the best method to know if the user has an iPhone X in javascript?

Thanks

Fowliang

What changes do you have in mind? – Larose

@Larose Does it really matter? – Atul

@Jackowski Yes it does. Depending on what has to be changed, there are much better ways to achieve it than to detect the device in the first place. – Larose

Actually I need to add another part to the app only for this device. Unfortunately these things doesn't depend to the new SDK. – Fowliang

Answer 1

Check: var deviceInformation = ionic.Platform.device();

From Ionic bundle.js

/**
     * @ngdoc method
     * @name ionic.Platform#device
     * @description Return the current device (given by cordova).
     * @returns {object} The device object.
     */
    device: function() {
      return window.device || {};
    },

---

Also check cordova-plugin-device

Properties

device.cordova       // returns CDV_VERSION
 device.model
 device.platform     // always returns iOS
 device.uuid
 device.version
 device.manufacturer // always returns  Apple
 device.isVirtual    // not relevant
 device.serial 

This plugin calls CDVDevice.m -> UIDevice so if you still cannot fetch iPhone X worth to find the way how to detect it in Obj-C and change CDVDevice.m.

---

Also check this QA: iOS devices return different format device model, why?

Transcribe

Does device.model return "iPhone X" though? – Tarnish

@Tarnish well, try it yourself :) – Transcribe

With simulator it returns "x86", how can we test it? Also looking at this question (link) it seems impossible to detect iPhone X – Fowliang

@ErnestoSchiavo run it on real device, simulators will always return x86 or x86_64 – Transcribe

Well, we have to wait iPhone X :) – Fowliang

OSX will always return "x86_64" device or emulator as per documentation. – Petrology

The question: "How to detect iPhone X (Ionic app)". OSX will always return "x86_64" device or emulator as per documentation. There is no right answer for this yet. Detecting an iPhone X is very different than OSX. – Petrology

Can anyone yet confirm what a real iPhone X device returns for device.model? – Gmt

@Gmt iPhoneX – Transcribe

cordova-plugin-device reported device.model for a hardware iPhoneX as iPhone10,6 – Strathspey

Answer 2

For cordova

using cordova-plugin-device plugin like so:

window.device.model

will give:

iPhone10,3 or iPhone10,6

See doc:

For browser

see this comment

Hume

Answer 3

I put together this es6 to check for iphone 10 and above

const isIphoneX = () => {
    try {
        const iphoneModel = window.device.model;
        const m = iphoneModel.match(/iPhone(\d+),?(\d+)?/);
        const model = +m[1];

        if (model >= 10) { // is iphone X
            return true;
        }
    } catch (e) { }

    return false;
}

** EDIT **

I believe I was using cordova-plugin-device as my project was not an ionic application. I rewrote the regex so it could work with ionic.Platform.device().model too.

Dormeuse

you don't think it should be const model = +m[0]; ? – Sherburne

@Sherburne javascript always dumps the full match into the 0 index so I used the 1 index for the first back-reference (which is in parenthesis) – Dormeuse

hai @Jacksonkr, not all models> = 10 are iphone X and above. There are exceptions for iPhone 8 (iPhone10,4) & 8 Plus (iPhone10,5). – Delwyn

Answer 4

I did the following using the built in ionic.Platform.device() method. I don't think it's necessary to install a whole new plugin if you are already using ionic.

let model = ionic.Platform.device().model
$scope.deviceIphonex = model.includes('iPhone10')

I can then use this anywhere in my app and do things specifically for the iphone X.

Departed

Answer 5

fix @Jacksonkr answer and thank you @Made in Moon for providing information regarding the iphone10.3 and iphone10.6 models. You can use this for get device iphone X and above

export default () => {
  try {
    const exceptions = ['iPhone10,3', 'iPhone10,6'];
    const iphoneModel = Device.model;
    const m = iphoneModel.match(/iPhone(\d+),?(\d+)?/);
    const model = +m[1];

    if (model >= 11) {
      // is iphone X
      return true;
    } else if (model === 10) {
      // iPhone10,3 = iPhone X
      // iPhone10,4 = iPhone 8
      // iPhone10,5 = iPhone 8 Plus
      // iPhone10,6 = iPhone Xs
      return exceptions.includes(iphoneModel);
    }
  } catch (e) {
    console.log(e);
  }

  return false;
};

Delwyn