jQuery detect apple device css conditional

Question

I'm attempting to detect whether a user is viewing a website from an Apple device, and if they are, make the div "carriage-promo" behave in a certain way.

Ordinarily this div has transitions and animate to take the height from 0px to 40px when a user scrolls down the page, this doesn't function very well on touch devices so I would like it to be static.

Consider:

    $(document).ready(function(){
        var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
        var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
        var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");

        if(isiPhone > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
        if(isiPad > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
        if(isiPod > -1)
        {
            $('#carriage-promo').css({'position':'fixed','bottom':'40px','width':'100%'});
        }
    });

I've only ever used CSS3 media queries for conditional styling behavior in the past, but this occasion calls for jQuery/JS.

Any suggestions? I'm expecting either a tiny syntax error, or to have completely misunderstood how this works!

Answer 1

try to add this line on ready:

window.scrollBy(0, 1);

looks like it helps on ios > 5
another way to use position: absolute and set bottom position scrollTop + windowHeight - promoHeight