iDevice.js

Discover which iOS devices are used on your site

If you’re a web developer and you’ve tried to know the specific iOS devices used by your users, you’ve hit a wall: different devices have the same user agent and screen size.

The solution, found in apple.com’s JavaScript, is to ask WebGL for the user’s GPU; iOS devices return a string like “Apple A12 GPU”. Combined with the screen size that’s enough to differentiate most devices.

Use cases:

iDevice.js

iDevice.js is a library that will tell you which iOS device is being used.

Download Star
0.98kB gzipped, v2.0.0
or npm i idevice
<script src="/js/idevice.js"></script>
<script>
if (iDevice) {
  console.log('The iOS device is an ' + iDevice);
}
</script>

The variable iDevice is a string such as “iPhone XS” when it identifies an iOS device, otherwise it’s undefined.

Integration with Google Analytics

if (iDevice) {
  ga('send', 'event', 'iOS devices', 'Page view', iDevice, {nonInteraction: true});
}
Or if you’re using the new global site tag (gtag):
if (iDevice) {
  gtag('event', 'Page view', {
    'event_category': 'iOS devices',
    'event_label': iDevice,
    'non_interaction': true
  });
}

Stats will then be available in Behavior > Events > Top Events.

Limitations

Devices that run iOS 7 or older (2% of active devices) don’t have WebGL and return undefined.

Not-yet-known iOS devices are reported as “Unidentified <CPU> <screen>”. For instance “Unidentified A13 375x812@3”.

Some devices are indistinguishable from others (9% of active devices):

And some devices might be their bigger sibling with Display Zoom:

“iPhone 6s” and “iPhone XS Max” are correctly returned when they don’t use Display Zoom.

Detecting Display Zoom

If you’d like to know what percentage of your users have Display Zoom enabled, you may do so on select devices. Check whether:

Changelog

2.0.0 (2018/11/03)

1.1.0 (2018/11/03)

1.0.2 (2018/11/03)

1.0.1 (2018/09/20)

1.0.0 (2018/09/19)

Initial release.

Download Star
0.98kB gzipped, v2.0.0
or npm i idevice