响应式灯箱无法在iPhone中工作

Responsive lightbox not working in iPhones

本文关键字：iPhone 工作 响应      更新时间：2023-09-26

我们正在尝试制作一个灯箱响应

这是最初的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"，点击其中的任何图像都会起作用）

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

#mageworxImageDataContainer{
    ...
    position: relative;
}

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");
        }
    }
相关文章：