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 is a library that will tell you which iOS device is being used.
| Download | Star |
|
0.98kB gzipped, v2.1.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.
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.
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.
If you’d like to know what percentage of your users have Display Zoom enabled, you may do so on select devices. Check whether:
screen.width of 320screen.width of 375Initial release.
| Download | Star |
|
0.98kB gzipped, v2.1.0
or
npm i idevice |