Question

我们将.fancybox()用于产品图片和sizetable（所有图片）

它在台式机和iPad上运行良好

仅在iPhone上产品图片没问题，但是sizetable太小而无法阅读

问题是：

我可以根据屏幕尺寸在一个特定的类上禁用fancybox吗？或
我可以允许fancybox被缩放和收缩，或者像普通图片一样打开它，就像在iPhone上一样吗？（最后选择首选）

Answer 1

我通常为希望在特定屏幕尺寸上禁用fancybox的客户做的是

在
等变量中设置我的首选屏幕尺寸
```
var setfancybox = 480; // or whatever
```
....如果屏幕width大于480，我将启用图像在fancybox中打开，否则将作为普通图像。
代码（html）我的目标元素与另一个类但fancybox如下：
```
<a class="modal" href="images/01.jpg">image 01</a>
```
...在这种情况下，我使用的是类 modal，因此我可以操作我的元素。
编写一个函数，用于检查屏幕的width并动态添加或删除fancybox 类到我的{{ 1}}选择器（它应该在fancybox初始化脚本之后运行），如：
```
modal
```
或者，如果var screenWidth, setfancybox = 480; // set fancybox class when screen size is > setfancybox value function checkScreen() { screenWidth = window.innerWidth; if (screenWidth > setfancybox) { // modal elements should open in fancybox if (!jQuery(".modal").hasClass("fancybox")) { jQuery(".modal").addClass("fancybox"); } } else { if (jQuery(".modal").hasClass("fancybox")) { jQuery(".modal").removeClass("fancybox"); } } } jQuery(document).ready(function ($) { $(".fancybox").fancybox(); checkScreen(); }); //ready调整大小（更改了方向！？），您可能需要再次运行checkScreen() 功能，这样您就可以：
```
window
```
... 通知我们使用$(window).resize(function () { clearTimeout(_resize); _resize = setTimeout(function () { checkScreen(); }, 500); // setTimeout }); / setTimeout来避免在clearTimeout期间多次运行功能过程但直到它停止。它还假设您先前已将resize变量声明为全局变量。

参见 JSFIDDLE

iPhone上的Fancybox（）无法缩放

1 个答案: