仅为手持设备触发jQuery

Question

我正在使用jQuery Backstrech plugin来实现一个响应式网站的全尺寸背景图片。

我希望jquery代码只在手持设备上运行，或者只在小于480px的视口上运行。这是可以做到的吗？

下面是我用来实现脚本和背景图像的代码：

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

我如何添加某种类型的jQuery条件，使此代码在480像素或更少的客户机上执行？

提前感谢您的帮助！

Answer 1

您可以使用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
  }
});

(查看标准设备的媒体查询的here。)

Answer 2

这样做只是为了检测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对象中，或者使用该函数来确定视口大小。

Answer 3

在这里，一条简单的语句就可以解决这个问题：

if (window.screen.availWidth <= 480) {
    // Your code
}