根据视口大小动态修改/禁用 javascript

Question

我在响应式网站设计中使用了galleriffic jQuery 图片库插件，可以查看here。正如您通过调整浏览器窗口大小看到的那样，我为 iPad、纵向和横向创建了各种状态——它仍然显示完整的图像库，即缩略图和相邻的全尺寸图像——最后是 iPhone，它只显示缩略图。

我的问题是，对于 iPhone 布局，缩略图仍然链接到主画廊容器——我已经隐藏了——而我希望它们简单地链接到更大的 JPEG 以单独打开，即好像Galleriffic 脚本被完全禁用。该脚本正在动态删除附加到“ul.thumbs”的“noscript”类——因此画廊将在没有javascript的情况下优雅地降级——我认为通过尝试通过jQuery addclass重新添加类我可以有效地禁用galleriffic初始化，但是没有用。

最终，我希望找到最优雅的解决方案，以在视口为 480 像素或更小的情况下更改/禁用画廊脚本对缩略图链接的修改 - 这可能吗？

感谢您的指导。

Answer 1

我遇到了类似的问题，一些轮播必须在移动设备上创建，但在桌面上被销毁......我不喜欢以像素为单位检查窗口宽度的解决方案，所以我创建了一个小功能来“收听”当媒体查询状态改变时。

您可以在每种状态下定义自己的代码（“在进入移动分辨率时”、“在离开桌面时”）...

希望对其他人有用；）
https://github.com/carloscabo/MQBE

Answer 2

您最好使用基于 CSS 媒体查询的检测来触发您的 js 函数，在某些浏览器中，媒体查询宽度与 js 中报告的宽度不同。

是的，人们做现在经常合理地调整他们的窗口大小......当有人旋转他们的 iphone/android 时，这是一个窗口调整大小事件。

查看包含一些基本代码的相关问题： How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

Answer 3

在您的 document.ready()（或替代）中，进行条件检查。

if($(window).width() > 480){
//create gallery
}

请记住，这不适用于即时调整浏览器大小的人 - 除了网络开发人员之外，几乎没有人。