Detecting iPhone 5 or other in Mobile Web

Question

I am writing a web application (xhtml, css, js) that also browsed in mobile phones. I want to detect the device is iphone 5 or not!

Do you know a javascript controller for it?

Why do you want to do that? Device and browser detection for the purposes of establishing capability are flawed strategies. [Feature or object detection](http://www.jibbering.com/faq/#detectBrowser) is a far better way to go about it. — RobG, Nov 27 '12 at 07:25

score 0 · Answer 1 · answered Nov 27 '12 at 07:05

0

You could use the CSS3 media query to detect iPhone 5:

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}

answered Nov 27 '12 at 07:05

defau1t

10,593
2
35
47

2

Cool, and when the iPhone 6 or some other device comes out with the same features? – RobG Nov 27 '12 at 07:22
@RobG - This seems like the only way to achieve it for now. – Derek 朕會功夫 Nov 27 '12 at 07:25
@Derek AFAIC, I don't think there is any other way to detect iphone 5 as of now. – defau1t Nov 27 '12 at 07:27
@Derek—it's a flawed strategy, unless the OP is doing it for some analytical exercise like devices used by visitors where a known error is no big deal. Note that there are over 375,000 browser user agent types listed on the [Web User Agents Database](http://www.webuseragents.com/) (oh, and 17,000 mobile browsers). – RobG Nov 27 '12 at 07:28
This is wrong since it'll also apply for any other device (e.g. Android) with high density display with 568px. Better check my answer. – Timo Ernst Apr 09 '13 at 17:12
@valmar which world are you in. there are better versions to detect devices using JS. CSS3 is the best as far as performance is considered. why did you downvote? – defau1t Apr 09 '13 at 17:51
@defau1t Because, as I said, if you use the css3 media query provided in your answer you will also target Android and Windows Phone Devices, not only iOS. – Timo Ernst Apr 10 '13 at 08:30

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

I knew this:

  if('devicePixelRatio' in window && window.devicePixelRatio == 2 ){
     // retina
  }

AND (if you need to detect on the server)

How to detect retina screen?

edited May 23 '17 at 12:12

Community

1
1

answered Nov 27 '12 at 08:16

webdeveloper

17,174
3
48
47

score 0 · Answer 3 · answered Apr 09 '13 at 17:22

You need to check if the user is on an iOS device and has a retina display and if the screen is exactly 548px high.

Just checking for retina+displayHeight is not enough since you might accidently target other operating systems (e.g. Android) that run on devices which also have a high density display and a screen height of 548px.

Just use this script, it'll do what you want: http://www.timo-ernst.net/2013/04/simple-iphone-5-detection-with-javascript/

Now you can apply a flag to your dom tree on startup (in <head></head>):

<script>if (isIphone5()) $("html").addClass("isIphone5");</script>

If you need to target iPhone5 via css you can now apply styles like this for example:

<style>.isIphone5 .someClass{color:red}</style>

Detecting iPhone 5 or other in Mobile Web

3 Answers3