在img元素上啟用PInch縮放

Question

我在使圖像在ipad上縮放（尤其是在chrome中）時遇到問題。 我在網上找到了很多解決方案，但沒有任何解決方法。 我已將視口的meta標簽更改為“用戶可縮放”，但僅適用於Safari瀏覽器，不適用於chrome。 我知道這是可以做到的，因為我已經在MM Lafleur的網站（下面的鏈接）上看到了它的完成。

最好是我希望這樣，以便圖像只是放大而不是整個網站，但是在這一點上我將接受任何解決方案。 有什么建議么？？

https://mmlafleur.com/shop/rebecca-black

Answer 1

添加此CSS，您就完成了...

.product-detail-main-container:hover {
    background-size: auto 170% !important;
}

.product-detail-main-container {
    transition: 0.2s all;
    background-size: auto 100% !important;
    background-repeat: no-repeat;
    pointer-events: none;
}

.product-detail-main-container .product-detail-zoom-area {
    pointer-events: auto;
}