禁用iOS设备上的链接使用CSS

Question

我有一个图片库，图片大小足以填充iPhone屏幕。

这些图片也是链接，因此，你可以想象，在iPhone上滚动变得非常烦人，因为你经常会不小心点击链接。

有没有办法仅使用CSS来防止这种情况发生？

如果不能，那么最简单的解决方法是什么？

谢谢！

- user1505254

Answer 1

我建议使用Javascript。不过，我找到了一种仅使用CSS的方法。第一步，您需要识别客户端浏览器，在HTML文件中的HEAD会话中添加以下代码：

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

只有在客户端使用iPhone浏览器时，才会加载“iphone.css”的内容。

在此文件“iphone.css”中，您需要创建一个类来禁用链接：

.disableLink {
   pointer-events: none;
   cursor: default;
}

在您的相册HTML代码中，将引用添加到链接中：

<a href="link.html" class="disableLink"> IMAGE </a>

这些步骤仅适用于iPhone/iPod touch，但如果您查看我的第二个参考资料，您将看到适应iPhone 4/iPod touch 4G的方法：

- well

Answer 2

我喜欢pointer-events: none;的想法，但我不会使用它，因为它的支持不够好。

如果我们把移动设备定义为只有特定屏幕尺寸，我会像这样做：

$(function () {
    var mobile = ($(window).width() < 481);
    $('#image-gallery').find('a').click(function (e) {
        if (mobile)
            e.preventDefault();
    });
});

然而，我会尝试将“移动”定义为其他东西，例如支持触摸事件的浏览器。

- Jezen Thomas

Answer 3

我认为没有基于CSS的解决方案（CSS并不真正设计用于更改HTML元素的行为）。

您可以在页面加载时使用JavaScript来检查浏览器视口的宽度，然后在视口大小为手机尺寸时找到并禁用/删除链接。

请参阅PPK的“两个视口的故事”文章以确定要检查哪些JavaScript属性以在您的情况下确定宽度（我还没有做足够的移动开发以记住这些信息）。

- Paul D. Waite