javascript - 仅针对手持设备触发 jQuery

标签 javascript jquery responsive-design media-queries

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

我希望 jquery 代码仅针对手持设备运行,或者仅针对小于 480 px 的视口(viewport)运行...可以做到吗?

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

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

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

预先感谢您的帮助!

最佳答案

您可以使用 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 标准设备的媒体查询。)

关于javascript - 仅针对手持设备触发 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8153335/

相关文章:

javascript - 'this.randomGenes' 为什么不是一个函数?

javascript - 如何将格式为 '2014-10-02T12:00:00' 的 DateTime 字符串解析为本地?

javascript - 使用 $http.post 和 resangular post 时出现 SyntaxError : Unexpected token F,

javascript 如何 foreach 循环遍历数组

javascript - 为什么我不能在函数开始时更改此按钮的文本?

html - 导航栏在资源管理器 11 中不起作用

c# - 即使在 javascript 中设置了值之后, <asp.HiddenField> 值在代码隐藏中仍为空

jquery - 如何将动态创建的div附加到容器

html - 当页面不是全宽时,响应式 css 日历格式会中断

css - 较低分辨率的 Bootstrap 布局