响应式灯箱在 iPhone 中不起作用

Question

我们正在努力使灯箱响应

原文如下CSS：

#mageworxLightbox{ position: absolute;  left: 0; width: 100%; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#mageworxImageContainer{ padding: 10px; }

已编辑成：

#mageworxLightbox{ position: absolute;  left: 0; width: 100%; height: auto !important;  z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ width:80% !important; height: auto !important; position: relative; max-width: 600px; background-color: #fff; margin: 0 auto; }
#mageworxImageDataContainer{ width: 80% !important; height: auto !important; max-width: 600px; line-height: 2em;  }
#mageworxImageContainer{ padding: 10px; height: auto !important;  }

但是关闭按钮在 iPhone 等设备上不再起作用，我不明白为什么；同样在横向模式下，图像未正确调整大小。

这是我们的页面： http://www.arredodesignonline.com/it/letto-design-imbottito-heart.html
（要查看灯箱，请在下拉菜单中选择 "modello letto"，然后单击其中的任何图片都可以使用）

Answer 1

将此 css 添加到您的样式表中。某些元素具有冲突层，这导致按钮成为 "under" 层，因此您不是在单击按钮而是在某个不可见层上。

#mageworxImageDataContainer{
    ...
    position: relative;
}

Answer 2

device.iphone = function () {
        return !device.windows() && find('iphone');
    };

if (device.ios()) {
        if (device.ipad()) {
            addClass("ios ipad tablet");
        } else if (device.iphone()) {
            addClass("ios iphone mobile");
        } else if (device.ipod()) {
            addClass("ios ipod mobile");
        }
    }

响应式灯箱在 iPhone 中不起作用

Responsive lightbox not working in iPhones

javascript

css

responsive-design

lightbox