Android Lightbox不能很好地使用移动设备

Lightbox在pc上非常棒

然而，情况是：我一直收到安卓和iPhone用户的各种抱怨，他们的移动设备上的Lightbox无法放大Lightbox内的较大图像，因为Lightbox会在屏幕上跳跃，而不会保持居中

还有几个其他问题。如果你有一台移动设备，请继续查看我的网站，以直观地了解我所说的内容：单击较大的图像，尝试在屏幕上放大和移动

问题是我还没有时间找到一个解决方案来嵌入代码，使Lightbox手机浏览器更友好

---

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

有几种响应性的灯箱替代方案，但我个人最喜欢的是

但这种方法会发送更大的图像，然后缩小图像以适应用户的屏幕大小。这既浪费了带宽，也不允许用户在手机上用本机的捏捏手势放大图像

我建议手机用户完全绕过灯箱，直接向他们发送图像文件。例如，捷步达康移动网站就是这样做的

下面是我用Fancybox2构建的一个示例：

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();
            }
        }
    });
});

$（文档）.ready（函数（）{
//初始化灯箱
$（'.fancybox'）。fancybox({
加载前：函数（）{
var windowsize=$（window.width（）；
//测试视口大小以查看其是否小于480px
如果（窗口大小<480）{
//取消lightbox并加载链接url
$.fancybox.cancel（）；
}
}
});
});

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

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

---

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

对于图像，这非常好。对于需要用户交互的对话？为了iframes？并不能解释为什么某些平板电脑决定将这些灯箱放置得非常奇怪。