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');
        }
     }

Nominalism

Answer 1

Found it.

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

Nominalism

navigator.userAgent.match(/(iPod|iPhone|iPad)/i) worked for me where yours didn't (the i makes it case insensitive) – Redon

Could compact this even further: /(ip(hone|od|ad))/i :) – Scent

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 – Yellowhammer

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. – Ibnsina

@Yellowhammer 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. – Closefitting

Answer 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!

Hyperspace

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 :( – Nominalism

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 – Nominalism

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". – Hyperspace

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 – Nominalism

Answer 3

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'});
        }
      }
    });

Acanthous

Answer 4

For web app version try this.

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

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

Acanthous

Answer 5

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');
    }
}

Treacherous

Answer 6

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>

Hyperspace

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: cl.ly/0d2V0o3O453a123v192u – Nominalism

nice mock up(s) and nice idea jimbojw, will use in the future. – Mule