Add iPhone-detection to jQuery script

Question

I've written a script in jQuery, which adds padding to an element when my website loads as a web app:

<script type='text/javascript'>
    jQuery("div").ready(function(){
        if (("standalone" in window.navigator) && window.navigator.standalone) {
            jQuery(".menu-secondary").css("paddingTop", "20px");
        };
    });
</script>

I'd like to extend the script to only apply when the website is loaded as a web app on an iPhone or iPod.

I've tried the following with no luck:

<script type='text/javascript'>
    jQuery("div").ready(function(){
        if (("standalone" in window.navigator) && window.navigator.standalone) ||
        ((navigator.userAgent.match(/iphone|ipod/i))) {
            jQuery(".menu-secondary").css("paddingTop", "20px");
        };
    });
</script>

Any help would be really appreciated!

http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript — Guilherme Natal de Mello, May 04 '14 at 20:46
If I could identify them, I wouldn't be wasting your time, buddy! — Mario Parra, May 04 '14 at 20:46
Is paddingTop standard jquery or do you have to use padding-top in js? — dcclassics, May 04 '14 at 20:50
paddingTop works fine - as I mentioned, the issue is with the userAgent condition in the second script — Mario Parra, May 04 '14 at 20:51

score 1 · Accepted Answer · answered May 04 '14 at 20:58

1

window.navigator.userAgent.match("iPhone")

this returns an array you should check for null or length

answered May 04 '14 at 20:58

user3594902

41
2

Thanks, but I don't know how to do that – Mario Parra May 04 '14 at 20:59
var array = window.navigator.userAgent.match("iPhone"); if(array!=null && array.length == 1) { } – user3594902 May 05 '14 at 03:11

Add iPhone-detection to jQuery script

1 Answers1