Question

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

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

最终，我希望找到最优雅的解决方案，当视口为480像素或更低时，更改/禁用galleriffic脚本修改缩略图链接 - 这可能吗？

感谢您提供任何指导。

Answer 1

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

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

请记住，这对于那些动态调整浏览器大小的人来说无效 - 除了网页开发人员之外几乎没有人。

Answer 2

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

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

请参阅此相关问题，其中包括一些基本代码： How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

Answer 3

我遇到了类似的问题，一些旋转木马必须在移动设备上创建，但在台式机中被破坏......我不喜欢以像素为单位检查窗口宽度的解决方案，所以我创建了一个小功能来＃34 ;听＆＃34;当mediaquery状态发生变化时。

您可以在每个州定义自己的代码（＃34;输入移动分辨率＆＃34;，＆＃34;离开桌面＆＃34;）...

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

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

3 个答案: