javascript - 媒体查询检测到特定浏览器大小时如何禁用href

Question

我有一个包含 20 个图像的响应式网格，当触摸或单击这些图像时，它们会在幻灯片中打开一个更大的、全尺寸的相应图像。

然而：

我只需要在移动设备上禁用指向幻灯片的链接（<=480）。

下面是它的工作原理：

<div class="box">
  <div class="boxInner">
    <a href="slideshow_illustration.html?er_col=0"/><img src="_assets/grid_illustration/geisha.jpg">
    <div class="titleBox">Geisha</div>
  </div>
</div>

请注意：我只是一名努力建立响应式个人网站的摄影师/艺术家，所以你必须像我 10 岁一样与我交谈。

提前感谢您的任何时间和耐心。

Answer 1

根据您要完成的任务，不使用 javascript 的一种方法是使用pointer-events. 这基本上禁止点击元素。

@media only screen and (max-device-width: 480px) {
     .boxInner a {
        pointer-events: none;
    }
}

Answer 2

通过在您的页面中包含 jquery 在您的站点中包含它

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

然后写一个像这样的小脚本：

<script type="text/javascript">

$(document).ready( function() {
    if (screen.width <= 480) {
        $('.boxInner a').on('click', function (event) {
            event.preventDefault();
        });
    }
});

</script>

这应该测试屏幕是否 <= 480，如果是则禁用链接。