Question

我正在使用jQuery Backstrech plugin向响应式网站实施全尺寸背景图片。

我希望jquery代码仅针对手持设备运行，或仅针对小于480像素的视口运行......可以吗？

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

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

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});
    }
});

执行以下操作：

启用noConflict模式。
通过简写语法挂钩ready事件。
查看window是否＆lt; = 480像素（我假设您想要＆lt; =，而不仅仅是＆lt;）。如果是这样，不需要其他检查，我们会进入if。
（可选），您可以通过查看navigator.userAgent（或更全面，here's an article on it）来包含其他浏览器嗅探。我不打扰（尽管浏览器嗅探是一件好事^tm），除非你真的有充分的理由在更大的屏幕上做backstretch事。
如果我们伸展，请触发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
}

仅为手持设备触发jQuery

4 个答案: