灯箱在移动设备上玩得不好答案

【问题标题】：Lightbox not playing nice with mobile device灯箱在移动设备上玩得不好
【发布时间】：2012-10-01 17:17:26
【问题描述】：

Lightbox 在电脑上非常棒。

但是，情况是：我收到了来自 Android 和 iPhone 用户的各种投诉，他们抱怨他们的移动设备上的 Lightbox 无法放大 Lightbox 中的较大图像，因为 Lightbox 会在屏幕上跳来跳去，而不是保持居中。

还有其他几个问题。如果您有移动设备，请继续查看我的网站，了解我在说什么：http://soullow.com/store/index.php?m...products_id=86 点击大图并尝试放大并在屏幕上移动。

问题是我没有时间找到嵌入代码以使 Lightbox 移动浏览器友好的解决方案。

有没有人遇到过这个问题，有解决方案、建议或任何东西？

【问题讨论】：

标签： android css lightbox2 mobile-browser pinchzoom

【解决方案1】：

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

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

现在解释一下：模态元素跳动的原因是它的位置是由两倍于屏幕大小的文档的宽度计算出来的，它加上滚动位置使其“居中”。因此，当您平移模态框时，滚动值会将其推向该方向更远。

【讨论】：

【解决方案2】：

有几种响应式灯箱替代品，但我个人最喜欢的是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();
            }
        }
    });
});

【讨论】：

对于图像，这很棒。对于需要用户交互的对话？对于 iframe？没有太多解释为什么某些平板电脑决定非常奇怪地放置这些灯箱。