jquery - 如何针对移动设备屏幕分辨率禁用 Coda slider ？

Question

我正在尝试在 my website 上实现响应式设计我在特色内容 slider 上有点卡住了。

我正在使用Coda Slider对于我的特色内容幻灯片，对于小屏幕宽度，我希望中止 slider 的 jQuery 函数并删除幻灯片函数的内联样式，以便它仅显示 block 。

我很确定我以前见过这样的例子，但是当我在我的书签中挖掘示例以发布到这里时，我真的找不到任何实际上看起来像这样工作的例子。也许是因为 JS 的限制使得这不可行？

这是我用来实现 slider 的 jQuery。我是否可以简单地添加任何内容来告诉它中止并在屏幕宽度低于特定尺寸时恢复正常？

   // Coda slider via http://www.ndoherty.biz/demos/coda-slider/2.0/

   $('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false,
        autoSlide: true,
        autoSlideInterval: 4000,
        slideEaseDuration: 500,
        autoSlideStopWhenClicked: true,
   });

现在我只是使用两个通过媒体查询实现的样式表，如下所示:

<link rel="stylesheet" href="/css/2011/fullwidth-responsive.css" media="only screen and (min-width : 480px)" />
<link rel="stylesheet" href="/css/2011/mobile.css" media="only screen and (min-width : 320px) and (max-width : 480px)" />

所以我希望 JS 中止与启动的移动样式表相对应，本质上我将仅使用 CSS 来呈现内容，而不使用任何 JS 演示动画等，例如 slider 为完整站点。

Answer 1

有几种方法可以做到这一点，尽管总会有一些差异(除非您实现了真正先进的检测设置来响应实时窗口更改)。媒体查询将响应任何大小更改(随时)，并且我们此处的代码只会运行一次(就在我们初始化 Coda slider 之前):

1.通过检查屏幕可用宽度来检测宽度:

if ( screen.availWidth > 480 ) {
  // .. initialize Coda here ..
}

2.检测您在移动样式表中应用的特定样式:

例如，假设 #header 在 mobile.css 中获得 50px 的高度。您可以通过检查该高度来检测该工作表是否处于事件状态:

if ( $( "#header" ).width() != 50 ) {
  // .. initialize Coda here ..
}

还有其他方法(例如创建虚拟媒体查询等)，但其中任何一种都可以满足您的要求。

注意:您可能还需要一个“else”语句来删除/添加移动布局可能需要的类。