Which techniques to use and avoid
Device detection enables a web developer or designer to optimise a web page specifically for the type of device that is accessing it. It also provides the granular level of detail required by Programmatic Advertising for more effective targeting and bid pricing for ‘real’ users.
Page layouts can be optimised for specific screen sizes and input methods. Performance can be improved by reducing the amount of data sent to devices likely to be on slower data connections. Testing and development times can be reduced by separating out different groups of devices.
The most important information for optimisation is the device type (Smartphone, Tablet, Desktop, Feature phone, etc), the input methods supported (hover, touch, keyboard, etc) and the physical dimensions of the screen.
Find out moreApple is Different
Apple devices are particularly complex to identify. This blog explains four different techniques which can be used to identify iPhones and iPads along with the benefits and drawbacks of each approach. The four techniques are:
- User-Agent HTTP headers
- Screen dimensions and pixel density
- WebGL API
- CPU stress testing
JavaScript snippets and data needed to implement the first three techniques are provided. The preferred method is WebGL API.
CPU stress testing is by far the most complex and performance impacting. Analysis from 100,000s of tests carried out on all models of iPads and iPhones by the 51Degrees data analysis team has been used to evaluate CPU stress testing. The raw results are available for download and are licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
The following table summarises each of the four techniques used with Apple products.
Technique | Benefits | Drawbacks |
---|---|---|
User-Agent |
|
|
Screen Dimensions |
|
|
WebGL API |
|
|
Stress Testing |
|
|
1. User-Agents
User-Agent HTTP headers are the most popular method of detecting different devices. They are provided during the first web request and are extremely quick to process.
Device detection solutions such as 51Degrees look for indicators in these HTTP headers to identify the device vendor and model. The following User-Agent is from a Nexus 7.
The presence of the characters "Nexus 7" before "Build" and after the Android version indicate the requesting device is a Nexus 7.
51Degrees tracks hundreds of millions of different User-Agent headers. Using statistical analysis and a professional team of data analysts 99.9% or better detection accuracy is achieved. A full time team of analysts is needed to test and classify new devices, operating systems and browsers.
Apple User-Agents
Unlike almost every other device vendor Apple do not identify different iPhone and iPad models in the User-Agent header. The most information that can be obtained using the User-Agent is whether the device is either an iPhone or iPad. The following User-Agent is from an iPad.
Such information is useful as it indicates that the device has a touch screen and it's either a Tablet with a screen size greater than or equal to 7 inches or a Smartphone with a screen size less than 7 inches. However it does not provide sufficient information about the screen to support more advanced optimisation techniques.
2. Screen Dimensions and Pixel Density
Once the User-Agent has been used to identify the request as coming from an iPhone or an iPad a small amount of JavaScript can be used to interrogate the device via the web browser to understand the screen height, width and pixel density. The following two tables show the different values for all iPhone and iPad models.
iPhone Model | Screen Height/Width Ratio | Pixel Density |
---|---|---|
1 | 3/2 | 1 |
3G | 3/2 | 1 |
3GS | 3/2 | 1 |
4 | 3/2 | 2 |
4S | 3/2 | 2 |
5 | 71/40 | 2 |
5C | 71/40 | 2 |
5S | 71/40 | 2 |
6 | 667/375 | 2 |
6 (Display Zoom)** | 71/40 | 2 |
6 Plus | 368/207 | 3 |
6S, 7S, 8S | 667/375 | 3 |
6 Plus S, 7 Plus S, 8 Plus S | 736/414 | 3 |
X | 812/375 | 3 |
** iPhone 6, 7 and 8, 6 Plus, 7 Plus, 8 Plus, have a Display Zoom setting which alters the reported screen dimensions.
iPad Model | Screen Height/Width Ratio | Screen Size | Pixel Density |
---|---|---|---|
1 | 4/3 | 1024 x 768 | 1 |
2 | 4/3 | 1024 x 768 | 1 |
3 | 4/3 | 1024 x 768 | 2 |
4 | 4/3 | 2048 x 1536 | 2 |
Air | 4/3 | 2048 x 1536 | 2 |
Air 2 | 4/3 | 2048 x 1536 | 2 |
Mini | 4/3 | 1024 x 768 | 1 |
Mini 2 | 4/3 | 2048 x 1536 | 2 |
Mini 3 | 4/3 | 2048 x 1536 | 2 |
Mini 4 | 4/3 | 2048 x 1536 | 2 |
Pro 9.7" | 4/3 | 2048 x 1536 | 2 |
Pro 10.5" | 4/3 | 2224 x 1668 | 2 |
Using both the User-Agent and screen information the following groups of iPhone can be identified.
- iPhone 1, 3G and 3GS
- iPhone 4 and 4S
- iPhone 5, 5C, 5S, SE or 6, 6s, 7 and 8(display zoom)
- iPhone 6, 6s, 7 or 8
- iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus
- iPhone 6 Plus, 6s Plus, 7 Plus or 8 Plus(display zoom)
- iPhone X
The following JavaScript snippet shows how to implement the logic to determine these iPhone categories in practice.
All iPads have the same screen ratio. An iPad Mini reports the same screen size in pixels as iPad 1 despite the two devices being of different physical size. However the pixel density can be used to differentiate the older iPad versions from the newer ones.
Using both the User-Agent and screen information the following groups of iPad can be identified.
- iPad 1, 2 and Mini 1
- iPad 3, 4, Air, Air 2, Mini 2, Mini 3, Mini 4, Pro 9.7
- iPad Pro 10.5
- iPad Pro 12.9, Pro 12.9(2nd Gen)
The following JavaScript snippet can be used to identify these four groupings.
This level of detail for iPhone satisfies most optimization requirements. For iPad more information to distinguish between larger screen and mini variants would be beneficial. Unlike User-Agent header analysis screen analysis requires JavaScript and as such the information needed to optimize server side is not available until the 2nd web request has been made.
3. WebGL API
Our preferred method to detect different Apple devices is to use the 'WEBGL_debug_renderer_info' extension. The JavaScript code snippets shared below can run on client browsers, require no external calls to any 3rd party sites. If using the 51Degrees solution this can be run server-side, allowing you the fastest detection possible.
How does it work?
The WEBGL_debug_renderer_info extension is part of the WebGL API and exposes two constants for debugging purposes, which are 1. vendor of the GPU and 2. the renderer name.
Depending on the privacy settings of the browser, this extension might only be available to privileged contexts. We have observed that it returns a result in approximately 90% of cases. Of course, this method is only possible as long as Apple don’t block this information in the future.
JavaScript for iPhones
JavaScript for iPads
If you are testing this method and require some assistance, please do not hesitate to contact us.
Device Model | Average times to identify GPU (in milliseconds) |
---|---|
iPhone 5 | 48 |
iPhone 6 | 57.6 |
iPhone 7 | 18 |
iPhone 8 | 14.75 |
iPhone X | 12.75 |
Device Model | Average times to identify GPU (in milliseconds) |
---|---|
iPad 3 | 46.3 |
iPad 4 | 23.9 |
iPad Mini 2 | 48.48 |
iPad Mini 3 | 66.25 |
iPad Air 2 | 72.46 |
iPad Pro 12.9" | 8.5 |
4. Detection with CPU Stress Testing
In order to gain even more granular information about the iPhone or iPad model another difference between the models needs to be found. One such difference is the performance of the CPU. Newer models of devices have more advanced CPUs and can therefore perform iterative calculations more rapidly than older versions.
Testing methodology
51Degrees data analysis team stress tested a range of real iPhone and iPad devices, both old and new using all the major web browsers. Three test algorithms were used;
- Prime factoring;
- Ackermann; and
- TAK (Ikuo Takeuchi)
For each device, web browser and algorithm 1000's of tests were conducted under four different conditions.
Simple Page | Complex Page | |
---|---|---|
No Background Applications | Tested | Tested |
Background Applications | Tested | Tested |
The simple page only contained the test script. The complex page included image assets and other content typical of a standard web page.
Tests were also conducted on different browsers, including Chrome and Opera. Different versions of the Safari browser, from 5.1 to 8.3 were tested. Although the majority of iPhone/iPad users will be using Safari, this usage drops to about 80% in China. Even in western countries, Safari usage is about 97%.
The JavaScript and input parameters used for each of the test algorithms are shown below.
Prime Factoring
function getPrime()
{
return largest_prime_factor(100000000000);
}
function factors(n)
{
var i;
var out = [];
var sqrt_n = Math.sqrt(n);
for (i = 2; i <= sqrt_n; i++)
{
if (n % i === 0)
{
out.push(i);
}
}
return out;
}
function primep(n)
{
return factors(n).length === 0;
}
function largest_prime_factor(n)
{
return factors(n).filter(primep).pop();
}
Ackermann
function getAckermann()
{
return = ackermann (3, 8);
}
function ackermann(m, n) {
if (m == 0) {
return n + 1;
} else if ((m > 0) && (n == 0)) {
return ackermann(m-1, n);
} else if ((m > 0) && (n > 0)) {
return ackermann(m-1, ackermann(m,n-1));
} else {
return 0;
}
}
TAK
function getTak()
{
return tak(17, 13, 6);
}
function tak(x, y, z) { return (x <= y) ? y : tak(tak(x - 1, y, z), tak(y - 1, z, x), tak(z - 1, x, y)); }
Results
Data was captured from 100,000s of tests and is available in its raw form for download at the end of this blog. The following analysis highlights the key findings and comments on the usefulness of the results for device detection purposes.
Differences in Algorithms
The following two tables show the average mean response times for the three algorithms in milliseconds. The pattern between all three algorithms is the same. All three can be used for stress testing the iPhone/iPad CPU to determine the device.
Ackermann | Prime Factoring | TAK | ||||||
---|---|---|---|---|---|---|---|---|
Model | Browser | Version | Average (in ms) | Standard Deviation | Average (in ms) | Standard Deviation | Average (in ms) | Standard Deviation |
3G | Safari | 5.02 | 6820 | 521 | 732 | 169 | 3988 | 528 |
3GS | Safari | 6 | 744 | 77 | 243 | 77 | 420 | 63 |
4 | Safari | 6.1.3 | 618 | 403 | 214 | 103 | 341 | 119 |
4 | Safari | 7.1.2 | 438 | 98 | 183 | 106 | 257 | 51 |
4S | Safari | 7.1.2 | 297 | 59 | 176 | 45 | 223 | 42 |
5 | Safari | 8.1.3 | 93 | 40 | 75 | 25 | 66 | 12 |
5C | Safari | 7.1.1 | 152 | 21 | 83 | 15 | 126 | 21 |
5C | Safari | 8.3 | 101 | 43 | 80 | 24 | 75 | 26 |
5S | Safari | 8.3 | 25 | 15 | 44 | 21 | 25 | 12 |
6 | Safari | 8.3 | 18 | 3 | 36 | 18 | 10 | 4 |
6 Plus | Safari | 8.3 | 23 | 12 | 39 | 18 | 23 | 11 |
Ackermann | Prime Factoring | TAK | ||||||
---|---|---|---|---|---|---|---|---|
Model | Browser | Version | Average (in ms) | Standard Deviation | Average (in ms) | Standard Deviation | Average (in ms) | Standard Deviation |
1 | Safari | 5.1 | 604 | 27 | 239 | 25 | 215 | 13 |
2 | Safari | 7 | 208 | 30 | 123 | 9 | 160 | 27 |
Mini | Safari | 8.3 | 184 | 34 | 141 | 35 | 115 | 33 |
3 | Safari | 8.3 | 166 | 50 | 127 | 18 | 101 | 13 |
4 | Safari | 8.3 | 84 | 25 | 70 | 17 | 63 | 19 |
Air | Safari | 8.3 | 25 | 6 | 36 | 8 | 21 | 6 |
Air 2 | Safari | 8.3 | 16 | 1 | 30 | 2 | 16 | 2 |
Mini 2 | Safari | 8.3 | 23 | 16 | 40 | 16 | 24 | 10 |
Mini 3 | Safari | 8.3 | 26 | 9 | 39 | 7 | 28 | 13 |
The following two charts, show response times of the three algorithms on the iPhone 5S and iPhone 5 respectively. Data points lower than 1% have been removed. The three algorithms can all be used to detect the difference between the two devices as the iPhone 5 responds consistently slower than the iPhone 5S.
The three algorithms have different performance characteristics but behave consistently. To reduce the permutations illustrated in the subsequent analysis only TAK will be used as it has a smaller standard deviation. Data from the full result set can be used to replicate this analysis using the other algorithms.
iPhone 4 & 4S
iPhone 4 is incapable of supporting Safari 8 and although iPhone 4S can run Safari 8, most of the handsets are using older browsers. The following chart shows the results from iPhone 4 and 4S.
These devices are older and as such the accuracy is reduced. For example if iPhone 4S were defined as having responses less than 240ms, then accuracy will be less than 80%. Also compared with iPhone 5S and 6, where the peak is about 40-50%, iPhone 4S has a peak of 18% and iPhone 4 a peak of 38%. This illustrates that older phones have broader peaks.
iPhone 5, 5C, 5S and 6
The following chart shows the top 90% of results. TAK can be used to differentiate between 5/5C and 5S/6. However 5 and 5C, and 5S and 6 cannot be differentiated. iPhone 6 is a newer phone and its peak is much sharper. Older phones tend to have a broader peak.
iPad 1, 2 & Mini 1
The following chart shows the results from older iPads. Due to the age of these devices, some of them do not support the latest Safari version. Tests were conducted on the latest available version. Timings below 1% are not shown and the graph contains the top 90% of response times.
iPad 3, 4, Air, Air2, Mini 2 & Mini 3
The following chart shows the results from newer iPads. Response times with a count of less than 1% are not shown. The results shown account for 90% of the available data. If all the results are shown then the graphs will appear like the chart for iPhone 4s with an exponentially decaying curve. iPad Air, Air2, Mini 2 & 3 results are grouped together. iPad 3 and 4 have longer response times. The results can be used to differentiate between iPad 3 from iPad 4 and from the other devices on the graph. However, iPad Air, Air 2, Mini 2 and 3 cannot be differentiated.
Browser Differences
The following chart shows results for different Safari browser versions on the iPhone 4. 7.1 performs more consistently than 6.1 but both have a decaying curve.
The following chart shows how the different browsers perform on iPad 4. The Safari browser is very efficient. The Sleipnir browser also performs as well as the Safari browser. The remaining browsers are less efficient. Some of these browsers are popular in Asia as they're optimized for popular regional languages.
The following charts shows how the different browsers perform on iPhone 5S. The results are similar to those for iPad 4.
Identification Possibilities
Using CPU stress testing the following iPhone and iPad model groupings can be identified with 80% or better accuracy. In all cases the accuracy is less than 97%.
From | To | Mean Responses |
---|---|---|
iPhone 3G | iPhone 3G | 4000 +/- 500 |
iPhone 3GS | iPhone 3GS | 400 +/- 60 |
iPhone 4 | iPhone 4 | 220 +/- 40 |
iPhone 4S | iPhone 4S | 260 +/- 50 |
iPhone 5 | iPhone 5 or 5C | 70 +/- 20 |
iPhone 5C | ||
iPhone 5S | iPhone 5S or 6(zoom mode) | 25 +/- 10 |
iPhone 6 | ||
iPhone 6 Plus | iPhone 6 Plus | 25 +/- 10 |
iPad 1 | iPad 1 | 215 +/- 10 |
iPad 2 | iPad 2 | 160 +/- 30 |
iPad Mini | iPad Mini | 115 +/- 30 |
iPad 3 | iPad 3 | 100 +/- 15 |
iPad 4 | iPad 4 | 60 +/- 20 |
iPad Air | iPad Air, iPad Air 2, iPad Mini 2 or iPad Mini 3 | 20 +/- 10 |
iPad Air 2 | ||
iPad Mini 2 | ||
iPad Mini 3 |
Conclusions
CPU stress testing does provide more granularity than User-Agent and screen analysis. However the results vary across different browsers and even across browser versions. No stress testing algorithm provides 100% accuracy. Of the three algorithms used, there is no clear leading algorithm.
CPU stress testing can be used to differentiate between iPhone 4 and 4S, also between 5/5C and 5S/6. However iPhone 5 and 5C, and 5S and 6 cannot be differentiated. The results for the iPhone 4/4S have shown that although there is a clear separation in the response times in the majority of the results, the response times do overlap reducing accuracy.
For the older iPads, the tests were conducted across different versions of the Safari browser. As these devices are older, some of them will not support the newer Safari browser versions making it difficult to compare them. This also highlights another drawback of using stress testing, in that one would need the test results of every Safari browser that is capable of running on the device in order to differentiate the models.
The results for newer iPads show that CPU stress testing can be used to differentiate between (1) iPad 3, 4 on one hand and (2) Air, Air 2, Mini 2, Mini 3 on the other. The method cannot be used to distinguish between Air, Air 2, Mini 2 or Mini 3. These results are too close to call.
There are many factors that can affect the CPU response times. The same device produced slightly different results from one test cycle to another. Temperature differences and battery strength all appear to be factors. In theory CPU performance does not degrade over time. In practice the surrounding components connected to the CPU, such as heat sync exchanges, do degrade resulting in slower response times for older devices. Also, background applications did not impact the mean response times significantly, but instead tended to increase the range of the response timings.
CPU stress testing results in slower page loads, even as great as 1/2 second and drains the battery more rapidly. Therefore it is not a recommended solution.
Summary
User-Agent and screen dimension with pixel density analysis provide most of the information needed to effectively optimize web sites for iPhone and iPad. CPU stress testing does provide more granular information but is of little practical use when optimizing or analysing web sites.
In order to use stress test algorithms to differentiate the iPhone and iPad models, a developer would need to define all the response time ranges for all browsers makes and all versions of the browser. The results are not 100% accurate and our testing has shown that the accuracy can be as low 80%.
All vendors except Apple provide accurate model information in the User-Agent to make techniques such as screen analysis or CPU stress testing unnecessary. 51Degrees does not use or advocate CPU stress testing as it stands out as degrading the user experience and is inaccurate.
Ultimately the best solution would be for Apple to change their approach to User-Agent construction to include the same information they provide to native application developers.
But in the meantime 51Degrees provides options for you to try yourself.
References
Details of the algorithms used can be obtained from Wikipedia.