Запуск JQuery ТОЛЬКО для карманных компьютеров - PullRequest
Новая
       7

Запуск JQuery ТОЛЬКО для карманных компьютеров

2 голосов
/ 16 ноября 2011

Я использую плагин jQuery Backstrech для реализации полноразмерных фоновых изображений на адаптивном веб-сайте.

Я хочу, чтобы код jquery работал ТОЛЬКО для карманных устройств или только для меньших окончем 480 пикселей ... это можно сделать?

Вот код, который я использую для реализации сценария и фонового изображения: 

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery.backstretch("www.url.com/images/bg.jpg", {speed: 150});
});

Как я могу добавить своего рода условное выражение jQuery?чтобы этот код выполнялся для клиентов с разрешением 480 пикселей или меньше?

заранее спасибо за любую помощь!

Ответы [ 4 ]

3 голосов
/ 16 ноября 2011

Вы можете сделать это с помощью http://www.modernizr.com/docs/#mq

Modernizr.load({
  test: Modernizr.mq('only screen and (max-width: 480px)'),
  yep : 'path-to-js/backstrech.js',
  complete : function () {
        //init the backstrech here
  }
});

(посмотрите здесь для медиа-запросов для стандартных устройств.)

1 голос
/ 16 ноября 2011

jQuery делает это действительно легко: 

jQuery.noConflict();
jQuery(function(){

    if (jQuery(window).width() <= 480
        /* Optional */ || navigator.userAgent.test(/browser_sniff_1/)
        /* Optional */ || navigator.userAgent.test(/browser_sniff_2/)
        /* Etc.     */
        ) {
        jQuery.backstretch("www.url.com/images/bg.jpg", {speed: 150});
    }
});

Это делает следующее:

  1. Включает режим noConflict.
  2. Перехватывает событие ready через сокращенный синтаксис.
  3. Проверяет, равен ли window <= 480 пикселей (я предположил, что вы хотели <=, а не просто <). Если это так, никаких других проверок не требуется, мы идем в тело нашего <code>if.
  4. По желанию , вы можете включить другой анализатор браузера, если хотите, взглянув на navigator.userAgent (или, если быть более точным, , вот статья об этом ). Хотя я бы не стал беспокоиться (избегать перехвата в браузере - это хорошо tm ), если только у вас нет веских причин делать backstretch на больших экранах.
  5. Если мы растягиваемся, запускается плагин backstretch.
0 голосов
/ 16 ноября 2011

Простое утверждение должно сработать здесь: 

if (window.screen.availWidth <= 480) {
    // Your code
}
0 голосов
/ 16 ноября 2011

Только что сделал это для обнаружения iPad. 

<script>
    (function($) {
        $.fn.isIPad = function() {
            return (navigator.platform.indexOf("iPad") != -1);
        }
    })(jQuery);

    if($(window).isIPad()) {
        document.write('<script src="', '/path/to.js', '" type="text/JavaScript"><\/script>');
    } else {
        // run other functions here
    } 
</script>

Добавьте различные пользовательские агенты, которые вам понадобятся, к объекту navigator.platform или используйте эту функцию для определения размера области просмотра.

...