CODEWITHSUNDEEP
javascriptcordovaionic-frameworkiphone-x
Ernesto Schiavo
Ernesto Schiavo

Reputation: 1060

How to detect iPhone X (Ionic - cordova app)

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

Upvotes: 15

Views: 12829

Answers (5)

Alauddin Afif Cassandra
Alauddin Afif Cassandra

Reputation: 576

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

Upvotes: 0

Jacksonkr
Jacksonkr

Reputation: 32247

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.

Upvotes: 5

JackDev
JackDev

Reputation: 5062

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.

Upvotes: 3

Made in Moon
Made in Moon

Reputation: 2464

For cordova

using cordova-plugin-device plugin like so:

window.device.model

will give:

iPhone10,3 or iPhone10,6

See doc:

enter image description here

For browser

see this comment

Upvotes: 5

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

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?

Upvotes: 7

Related Questions