Javascript required
Skip to content Skip to sidebar Skip to footer
Home / Jquery How to Determine if It Is a Ios Device

Jquery How to Determine if It Is a Ios Device

6 Answers 6

Found it.

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

answered Sep 14 '11 at 6:41

5

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

    Sep 16 '11 at 19:59

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

    Nov 27 '12 at 8: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

    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.

    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.

    Mar 24 '18 at 17:46

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 5:35

4

  • 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 :(

    Sep 14 '11 at 5: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

    Sep 14 '11 at 5: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".

    Sep 14 '11 at 6: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

    Sep 14 '11 at 6:15

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

answered Aug 12 '14 at 15:56

For web app version try this.

              if (     ("standalone" in window.navigator) &&     !window.navigator.standalone     ){      // .... code here .... }

reVerse

34.2k 21 gold badges 88 silver badges 83 bronze badges

answered Jan 26 '15 at 20:57

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

answered Apr 15 '16 at 8:06

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 6:23

2

  • 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

    Sep 14 '11 at 6:32

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

    Oct 24 '17 at 5:26

Not the answer you're looking for? Browse other questions tagged jquery ios if-statement user-agent or ask your own question.

Jquery How to Determine if It Is a Ios Device

Source: https://stackoverflow.com/questions/7411662/simple-way-to-identify-ios-user-agent-in-a-jquery-if-then-statement