javascript - 仅为手持设备触发 jQuery

Question

我正在使用jQuery Backstrech 插件将全尺寸背景图像实现到响应式网站。

我希望 jquery 代码仅适用于手持设备，或者仅适用于小于 480 像素的视口......可以做到吗？

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

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

我如何添加某种 jQuery 条件来使此代码为具有 480 像素或更少像素的客户端执行？

提前感谢您的帮助！

Answer 1

You can do this with the 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
  }
});

(Have a look here for media queries for stanard devices.)

Answer 2

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 像素（我假设你想要 <=，而不仅仅是 <）。如果是这样，不需要其他检查，我们进入if.
4. 或者，您可以通过查看navigator.userAgent（或者更彻底，这里有一篇关于它的文章）来包含其他浏览器嗅探。不过，我不会打扰（避免浏览器嗅探是一件好事^tm），除非你真的有充分的理由backstretch在更大的屏幕上做这件事。
5. 如果我们正在拉伸，则触发backstretch插件。

Answer 3

刚刚为 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 4

一个简单的语句应该在这里解决问题：

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