Simple way to identify iOS user agent in a jQuery if/then statement?

Question

Exactly like it sounds..

Is there some magical and easy way to say:

    if (user agent is iOS) {
        if (browserRatio >=1.5) {
            $container.css('min-height', '360px');
        } else {
            $container.css('min-height', '555px');
        }
     }

technopeasant · Accepted Answer · 2011-09-14T23:12:03.037

75

Found it.

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    if (browserRatio >=1.5) {
        $container.css('min-height', '360px');
    } else {
        $container.css('min-height', '555px');
    }
}

edited Sep 14 '11 at 23:12

answered Sep 14 '11 at 06:41

technopeasant

7,809
31
91
149

6

navigator.userAgent.match(/(iPod|iPhone|iPad)/i) worked for me where yours didn't (the i makes it case insensitive) – Nick Spiers Sep 16 '11 at 19:59
9

Could compact this even further: /(ip(hone|od|ad))/i :) – backdesk Nov 27 '12 at 08:20
This is not an ultimate solution, as it also matches on WP IE. Example UA from IE11: `Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 925) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537` – seniorpreacher Nov 10 '15 at 10:25
It is true that a great many things across different browsers can be handled via media queries. However, there are some things that a browser specific. For instance, the auto complete background color across browsers, not resolutions is different. If one needs to manually set the background color of an input element to mimic auto fill (the web app I am working does this), then one needs to know which browser is running. Therefore, thanks for the answer above. That is spot on. – jkwuc89 Sep 30 '16 at 16:31
@seniorpreacher It looks to me like WP IE is _trying_ to be included in this match by intentionally including iOS Safari's user agent at the end. So perhaps it is not quite such unexpected behaviour. – Goulash Mar 24 '18 at 17:46

score 2 · Answer 2 · answered Sep 14 '11 at 05:35

2

I know you're asking about jquery in particular, but IMO, you almost certainly want to use CSS3 @media queries for this. There's even support for testing for landscape or portrait orientation.

@media (orientation:landscape) {
  .container_selector {
    min-height: 555px;
  }
}
@media (orientation:portrait) {
  .container_selector {
    min-height: 360px;
  }
}

Hope this helps!

answered Sep 14 '11 at 05:35

jimbo

11,004
6
29
46

i hear you.. use + love them, but for this instance, it's kicking in a min-height that's only for iOS when not in web app mode. So it needs to be Script :( – technopeasant Sep 14 '11 at 05:44
and i could target iPhone 4 specifically with -webkit-min-device-pixel-ratio: 2, but unfortunately there's no css if/then unless your using a specialized library – technopeasant Sep 14 '11 at 05:47
so, could you use the window.screen.height/width properties, or would that not help either? I don't know what you mean by "when not in web app mode". – jimbo Sep 14 '11 at 06:00
not familiar with window.screen.height/width... sounds intriguing. iPhones have a URL bar in the browser that is removed when a site is web-app capable. to feign it for the average user visiting the site, you can force the url bar to hide with javascript, but to do so i need to have defined height on the site. so.. I use an if/then to put the appropriate height on to fake web app mode – technopeasant Sep 14 '11 at 06:15

Aaron · Answer 3 · 2014-08-12T16:59:03.057

In order for this to work you are going to need to define browserWidth, but yes it will work. Here I targeted iPad only.

    $(window).load(function(){
      var browserWidth = $(window).width(); 

      if (navigator.userAgent.match(/(iPad)/)) {
        if (browserWidth == 768) {
            $('.sectionI').css({'margin-left': '30px'});
        } else if (browserWidth == 1024)  {
            $('.sectionI').css({'margin-left': '0px'});
        }
      }
    });

score 1 · Answer 4 · edited Jan 26 '15 at 21:23

1

For web app version try this.

if (
    ("standalone" in window.navigator) &&
    !window.navigator.standalone
    ){

    // .... code here ....
}

edited Jan 26 '15 at 21:23

reVerse

35,075
22
89
84

answered Jan 26 '15 at 20:57

Aaron

19
2

score 0 · Answer 5 · answered Apr 15 '16 at 08:06

To make sure this string doesn't get matched: Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 925) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537 just change your code to

if (navigator.userAgent.match(/(\(iPod|\(iPhone|\(iPad)/)) {
    if (browserRatio >=1.5) {
        $container.css('min-height', '360px');
    } else {
        $container.css('min-height', '555px');
    }
}

score -1 · Answer 6 · answered Sep 14 '11 at 06:23

-1

Based on comments to my previous answer, it sounds like the real question is, "how do you hide the URL bar in an iPhone". To that question, I found this:

How to Hide the Address Bar in MobileSafari:

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">...</body>

answered Sep 14 '11 at 06:23

jimbo

11,004
6
29
46

1

no, it's not. I'd like to identify the iOS user agent to apply an if/then statement to it. To clarify web app mode on iOS, I made a nice little diagram: http://cl.ly/0d2V0o3O453a123v192u – technopeasant Sep 14 '11 at 06:32
nice mock up(s) and nice idea jimbojw, will use in the future. – brandito Oct 24 '17 at 05:26

Simple way to identify iOS user agent in a jQuery if/then statement?

6 Answers6

Linked