javascript - 在 elevateZoom 中禁用 Hover for Mobile 设备的缩放效果

Question

当您检查 elevateZoom在移动设备上，尽管我们关闭了缩放选项，但当我们单击图像时页面滚动选项不起作用。这是一个麻烦。

我们想为移动设备或响应式大小禁用缩放选项。

我们是否可以使用任何值或变量来完全禁用移动设备的缩放效果？

任何人都可以建议如何做到这一点，或者是否有人在过去为他们的主题做过这件事？

Answer 1

您可以获得的 ElevateZoom API:

var ezApi = $('#primaryImage').data('elevateZoom');

为了启用/禁用缩放你应该使用“changeState”方法

ezApi.changeState('enable'); // or disable

要检测更改媒体查询断点，您可以使用 matchMedia

var mq = window.matchMedia('(min-width: 768px)');
mq.addListener((b) => {
  if (b.matches) {
      // do something for screens > 768px, for example turn on zoom
      ezApi.changeState('enable');
  } else {
      // do something for screens < 768px, for example turn off zoom
      ezApi.changeState('disable');
  }
});