jQuery Dynamic Background-Postion для iPhone

Question

Простите, я всего n00b с javascript!У меня сложный запрос, который я пытался составить часами, думаю, у меня есть кусочки, но у меня плохое понимание синтаксиса javascript и jQuery, может кто-нибудь помочь мне собрать это вместе?

Сначалаэтот код должен определять через строку UserAgent, является ли устройство iPhone (Примечание: я не уверен, работает ли это для всех мобильных устройств ... какие-либо предложения по улучшению условных выражений, которые будут перехватывать ВСЕ iPad, iPhone и т. д. - что угоднокоторый использует область просмотра, а не полосы прокрутки)

<script type="text/javascript">
jQuery(document).ready(function(){  

    var deviceAgent = navigator.userAgent.toLowerCase();  
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);            
        if (agentID) {
        {
            // do stuff
        }
        else
        {
            // do nothing
        }
    }
</script>

Следующий фрагмент головоломки - определение высоты области просмотра.Важно, чтобы этот сценарий был условным и применялся только к устройствам, использующим область просмотра и НЕ полосы прокрутки, в противном случае я испорчу сайт для немобильных пользователей.Мне нужно только изменить background-position на оси y, пытаясь предотвратить исчезновение фонового изображения, когда мобильные пользователи перемещают область просмотра.

var viewportHeight = $(window).height();

Я нашел этот фрагмент кода, который использует эффект "parralax"- где прокрутка вашей позиции влияет на фоновую позицию.

        $(function(){
            var yAdd = 0;
            var scrollInterval = setInterval(function(){
                yAdd++;
                if(yAdd >= 920){
                    xAdd = 0;
                }
                $('#body').css('background-position',xAdd + 'px 100%');
            },10);
        });        }

Может ли кто-нибудь помочь мне сшить все это вместе ... ПОЖАЛУЙСТА?!

Ядумая, что это должно выглядеть примерно так:

<script type="text/javascript">
jQuery(document).ready(function(){  

    var deviceAgent = navigator.userAgent.toLowerCase();  
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);            
        if (agentID) {

        $(function(){
            var viewportHeight = $(window).height();
            var yAdd = 0;
            var scrollInterval = setInterval(function(){
                yAdd++;
                if(yAdd >= 920){
                    yAdd = 0;
                }
                $('#body').css('background-position',yAdd + 'px 100%');
            },10);
        });        }
        }
        else
        {
            ''
        }
    }
</script>

Answer 1

У меня пока нет официального ответа на этот вопрос, но я ЗАКРЫТА ... Читать здесь

https://stackoverflow.com/questions/4719469/patching-this-code-to-apply-dynamic-iphone-background-position

Я нашел способ динамически устанавливать свойство "top: x" на основе позиции прокрутки (по крайней мере, это работает на моем iPhone) ... но мне все еще нужна помощь, чтобы собрать все это вместе!

Answer 2

Это может быть не совсем то, что вы ищете, но вы можете обнаружить устройства iphone, ipad и ipod с помощью CSS, как это

jQuery(document).ready(function(){  
    var deviceAgent = navigator.userAgent.toLowerCase();  
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);  
       if (agentID) {
          // do something
       } else {
          //do this
       }
});

единственная проблема в том, что этот код не относится только к iPhone, iPad, iPod и т. Д.

, поскольку исправленное фоновое изображение не работает. Я знаю, вы знаете, чтоимеет смысл, почему это не так, но это отстой, и я не исследовал решение для этого