如何在媒体查询检测到特定浏览器大小时禁用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，如果是，则禁用链接。