Question

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

图像也是链接，所以你可以想象，在iPhone上滚动变得非常令人沮丧，因为你经常偶然点击链接。

无论如何只能单独使用css来阻止这种情况吗？

如果没有，那么这个问题最简单的解决办法是什么？

谢谢！

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的方式：

Answer 2

我认为没有基于CSS的解决方案（CSS实际上并不是为改变HTML元素的行为而设计的。）

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

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

Answer 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();
    });
});

但是，我会尝试将'mobile'定义为其他东西，例如，一个支持触摸事件的浏览器。

使用CSS禁用iOS设备的链接

3 个答案: