5

Is there a way to detect iPhone 6 and 6 Plus via JavaScript or PHP ? I need a boolean value for a conditional if else in jQuery. It's for a web app in Safari (or UIWebView). I tried to detect the screen resolution but because of meta viewport or pixel ration (I don't really know) the output value is the same on iPhone 5, iPhone 6 and 6 Plus. Thanks in advance !

Beny
  • 890
  • 2
  • 15
  • 26
  • this should give you some ideas-- http://stackoverflow.com/questions/8309998/how-to-determine-which-iphone-version-the-javascript-code-runs-on and this should show you the correct media queries: http://stackoverflow.com/questions/25759046/iphone-6-and-6-plus-media-queries – Mia Sno Mar 31 '15 at 23:39
  • Thanks for ideas. The retina detection can't work because it will not make the difference between iPhone 4 and iPhone 6. (Or I'm wrong...) – Beny Mar 31 '15 at 23:57
  • The only way I found was to create a boolean value in Objective-C and call the boolean result via JavaScript with `stringByEvaluatingJavaScriptFromString`. It works but I would have preferred a full JS way... Snif. – Beny Apr 01 '15 at 12:12
  • 1
    can't you add a class inside a media query such as used in the links I provided that targets just 6 and 6+, so add `.iphone6 {display:block};` - and then put that same class in the non-media query section as display:none - and then use javascript to say "if this class is display:block - then yadayada, else yadayada"?? – Mia Sno Apr 01 '15 at 16:59
  • Thanks Mia, I used your idea with jQuery `matchMedia` and it works like that. Best. – Beny Apr 08 '15 at 13:58

3 Answers3

0

With javascript it would be a combination of two methods:

function iPhoneVersion() {
  var iHeight = window.screen.height;
  var iWidth = window.screen.width;
  if (iWidth === 320 && iHeight === 480) {
    return "4";
  }
  else if (iWidth === 375 && iHeight === 667) {
    return "6";
  }
  else if (iWidth === 414 && iHeight === 736) {
    return "6+";
  }
  else if (iWidth === 320 && iHeight === 568) {
    return "5";
  }
  else if (iHeight <= 480) {
    return "2-3";
  }
  return 'none';
}

function isIphone() {
  return !!navigator.userAgent.match(/iPhone/i);
}

So all you need to do is test if it's an Iphone and then get the version:

if ( isIphone() && iPhoneVersion() === "6"){
  //code..
}
Shawn Dotey
  • 616
  • 8
  • 11
0

if you need only iphone 6 or iphone 6 plus to detect, use it:

    function isIphoneUp6() {
        var isIPhone = false;
        isIPhone = !!navigator.userAgent.match(/iPhone/i);

        if(isIPhone){
            var iHeight = window.screen.height;
            var iWidth = window.screen.width;
            if ((iWidth === 375 && iHeight === 667) || (iWidth === 414 && iHeight === 736)) {
                return true;
            }
        } else {        
            return false;
        }
    }


    if ( isIphoneUp6()){
      // your code
    }
Arthur Tsidkilov
  • 5,401
  • 2
  • 21
  • 18
-2

navigator.userAgent will return

"Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4" for iphone 6 and iphone6 plus

navigator.userAgent will return "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"

So you would be able to detect iphone5 and iphone6 with navigator.userAgent

D G ANNOJIRAO
  • 60
  • 4
  • 2
    I'm not sure that using the user-agent can work. The iPhone model is not specified. And if user updates his iOS or Safari version, the user-agent will change. – Beny Apr 01 '15 at 12:09