Question

Lightbox在电脑上非常棒。

然而，情况是：我一直在从Android和iPhone用户那里得到关于Lightbox在移动设备上的各种投诉，关于他们如何无法放大灯箱内的较大图像，因为Lightbox将在屏幕上跳转而不是保持居中。

还有其他几个问题。如果您有移动设备，请继续查看我的网站以查看我正在谈论的内容：http://soullow.com/store/index.php?m...products_id=86点击放大的图片，然后尝试放大并在屏幕上移动。

问题是我没有时间找到嵌入代码的解决方案，以使Lightbox Mobile Browser友好。

有没有人遇到这个问题，有解决方案，建议或其他什么？

Answer 1

有几个响应式灯箱替代品，但我个人最喜欢的是Fancybox2 (http://fancyapps.com/fancybox/)。

但是这种方法会发送更大的图像，然后按比例缩小以适应用户的屏幕尺寸。这是浪费带宽，也不允许用户在手机上使用原生捏合手势放大图像。

我建议为手机用户完全绕过一个灯箱并向他们发送直接图片文件。例如，Zappos移动网站就是这样做的。

以下是我使用Fancybox2构建的示例：http://jsfiddle.net/alexroper/5s6dv/

jQuery看起来像这样。您必须根据手机甚至平板电脑用户所需的行为更新视口大小。

$(document).ready(function() {
    // initialize the lightbox 
    $('.fancybox').fancybox({
        beforeLoad: function() {
            var windowsize = $(window).width();
            // test the viewport size to see if it's smaller than 480px
            if (windowsize < 480) {
                // cancel the lightbox and load the link url
                $.fancybox.cancel();
            }
        }
    });
});

Answer 2

似乎JavaScript中的大多数lightbox / shadowbox / modal对话库都依赖于body.clientWidth和clientHeight来计算图像或对话框的大小和位置。

在移动浏览器中，clientWidth比screen.Width宽，这样可以保留格式，并允许用户缩放和平移页面。一个可靠的修复方法是使用body.clientWidth来计算模态元素的大小和位置，但是当它小于body.clientWidth

时会回退到使用screen.Width

现在解释一下：模态元素跳转的原因是它的位置是由文档宽度计算的，它是屏幕大小的两倍，并且它添加了滚动位置以使其“居中”。所以当你平移模态时，滚动值会将它推向那个方向。

灯箱不适合移动设备

2 个答案: