使用 CSS 禁用 iOS 设备的链接答案

【问题标题】：Disable links for iOS Device using CSS使用 CSS 禁用 iOS 设备的链接
【发布时间】：2012-07-17 19:11:05
【问题描述】：

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

图像也是链接，因此您可以想象，在 iPhone 上滚动变得非常令人沮丧，因为您经常不小心点击链接。

有没有办法单独使用 css 来防止这种情况发生？

如果不是，那么解决这个问题最简单的方法是什么？

谢谢！

【问题讨论】：

标签： iphone css ios touch

【解决方案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 的方法：

【讨论】：

【解决方案2】：

我认为没有基于 CSS 的解决方案（CSS 并不是真正旨在改变 HTML 元素的行为）。

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

请参阅 PPK’s ‘A Tale of Two Viewports’ article 以了解在您的情况下要检查哪些 JavaScript 属性来确定宽度（我还没有完成足够多的移动开发来记住我的头脑）。

【讨论】：

【解决方案3】：

我喜欢pointer-events: none; 的想法，但我不会使用它，因为it isn't well-supported。

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

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

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

【讨论】：