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添加到样式表中。一些元素具有冲突层，这使得按钮位于图层“下方”，因此您不会单击按钮而是在某个不可见的图层上。

#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中使用

2 个答案: