• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Device Detection for Apple iPhone and iPad

Published on Wednesday, July 8, 2015

Device Detection for Apple iPhone and iPad

Which techniques to use and avoid

Device detection enables a web developer or designer to optimize a web page specifically for the type of device that is accessing it. The page layout can be optimized for screen size 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 difference groups of devices.

Example Euro Millions lottery game card for different devices - see Loterie Nationale Case Study

The most important information for optimization 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.

Add iPhone and iPad device intelligence to your web system

Get Started

Apple is Different

Apple devices are particularly complex to identify. This blog explains three different techniques which can be used to identify iPhones and iPads along with the benefits and drawbacks of each approach. The three techniques are:

  1. User-Agent HTTP headers
  2. Screen dimensions and pixel density
  3. CPU stress testing

JavaScript snippets and data needed to implement the first two techniques are provided.

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.

Creative Commons License

The following table summarizes each of the three techniques used with Apple products.

Technique Benefits Drawbacks
User-Agent
  • Identifies device type and input methods
  • Very fast and immediately identifies the device
  • Missing useful screen information
Screen Dimensions
  • When used with User-Agent provides most information needed
  • Requires a small amount of JavaScript
  • Doesn't provide information until second web site request
Stress Testing
  • When used with the other 2 techniques identifies more granular model information
  • Slows down web site and is inaccurate
  • Complex logic to maintain
  • Doesn't provide information until second web site request
Summary of benefits and drawbacks for each technique

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.

Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Safari/537.36

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.

Mozilla/5.0 (iPad; CPU OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A365 Safari/600.1.4

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 optimization techniques.

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
6 Plus (Display Zoom)** 667/375 3
iPhone device dimension data.
** iPhone 6 and 6 Plus have a Display Zoom setting which alters the reported screen dimensions.
iPad Model Screen Height/Width Ratio Pixel Density
1 4/3 1
2 4/3 1
3 4/3 2
4 4/3 2
Air 4/3 2
Air 2 4/3 2
Mini 4/3 1
Mini 2 4/3 2
Mini 3 4/3 2
iPad device dimension data

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 and iPhone 6 (in Display Zoom mode)
  • iPhone 6 (normal mode)
  • iPhone 6 Plus

The following JavaScript snippet shows how to implement the logic to determine these iPhone categories in practice.

// iPhone model checks.
function getiPhoneModel() {
// iPhone 6 Plus
if ((window.screen.height / window.screen.width == 736 / 414) && (window.devicePixelRatio == 3)) {
return "iPhone 6 Plus";
}
// iPhone 6
else if ((window.screen.height / window.screen.width == 667 / 375) && (window.devicePixelRatio == 2)) {
return "iPhone 6";
}
// iPhone 5/5C/5S or 6 in zoom mode
else if ((window.screen.height / window.screen.width == 1.775) && (window.devicePixelRatio == 2)) {
return "iPhone 5, 5C, 5S or 6 (display zoom)";
}
// iPhone 4/4S
else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 2)) {
return "iPhone 4 or 4S";
}
// iPhone 1/3G/3GS
else if ((window.screen.height / window.screen.width == 1.5) && (window.devicePixelRatio == 1)) {
return "iPhone 1, 3G or 3GS";
} else {
return "Not an iPhone";
};
}

 

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 and Mini 3

The following JavaScript snippet can be used to identify these two groupings.

function getiPadVersion() {
var pixelRatio = getPixelRatio();
var return_string = "Not an iPad";
if (pixelRatio == 1 ) {
return_string = "iPad 1, iPad 2, iPad Mini 1";
}
if (pixelRatio == 2) {
return_string = "iPad 3, iPad 4, iPad Air 1, iPad Air 2, iPad Mini 2, iPad Mini 3";
}
return return_string;
}

 

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.

Add granular device intelligence to your existing analytics package

Get Started

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;

  1. Prime factoring;
  2. Ackermann; and
  3. 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
4 different test conditions

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
Results for iPhone devices on Safari Browsers.
  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
Results for iPads devices on Safari Browsers.

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.

 

Response times of all three algorithms on iPhone 5S
Response times of all three algorithms on iPhone 5S
Response times of all three algorithms on iPhone 5
Response times of all three algorithms on iPhone 5

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.

TAK response times of iPhone 4 & 4S on Safari 7.1
TAK response times of iPhone 4 & 4S on Safari 7.1

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.

TAK response times of older iPads
TAK response times of iPhone 5, 5C, 5S & 6 on Safari 8.3
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.

TAK response times of newer iPads
TAK response times of older iPads
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.

TAK response times of newer iPads
TAK response times of newer iPads
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.

TAK response times for different Safari browsers.
TAK response times for different Safari browsers.

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.

Different browsers on iPad 4
Different browsers on iPad 4.

The following charts shows how the different browsers perform on iPhone 5S. The results are similar to those for iPad 4.

Different browsers on iPhone 5S
Different browsers on iPhone 5S

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  
Apple device groups by TAK algorithm response times on latest Safari version supported

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.

Try 51Degrees today to add detailed device information to your website

Get Started

References

Details of the algorithms used can be obtained from Wikipedia.

 

Comments (0)

Documents to download

Iftikhar Ahmed
>

51Degrees Products

Other posts by 51Degrees Products
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Developers Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display dmexco DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany git repositories Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia m.dot Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native Native Apps NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 OnePlus 5 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV programmatic PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images Responsive web design RESS Review reviews RIM Ringmark RTB RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Server-side optimisation Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Tips Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web Web Apps WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE