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

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

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

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

Solution 4

For web app version try this.

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

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

View more solutions