3

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

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

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

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

谢谢！

4

3 回答 3

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

于 2012-07-17T19:28:46.907 回答
0

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

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

请参阅PPK 的“A Tale of Two Viewports”文章，了解在您的情况下要检查哪些 JavaScript 属性来确定宽度（我还没有做足够的移动开发来记住我的头脑）。

于 2012-07-17T19:18:26.043 回答
0

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

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

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

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

于 2012-07-17T20:01:55.307 回答