在Mobile Safari / Webkit上禁用触摸屏上的文本突出显示放大镜

Question

我的iPhone网站中有一些元素，其中没有任何文字，但需要用户点击并按住它们（DIV）。这会导致文本突出显示/编辑循环/光标显示，这实在令人分心。

我知道有一个CSS规则可以删除触摸时显示在可点击元素上的黑盒子。是否有类似的禁用文本放大镜？

Answer 1

刚收到开发者中心服务台的回复。我需要添加这个CSS规则：

-webkit-user-select: none;

Answer 2

使用此CSS代码

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */

Answer 3

这对于保护您不想复制或保存的内容非常有用，例如图像：

#yourdiv img {-webkit-touch-callout: none; }

Answer 4

这解决了我，在JS：

long

似乎绕过操作系统中的任何东西来触及触摸。

Answer 5

我在自己尝试时发现了这一点。首先，您必须将此规则添加到封闭元素：

-webkit-user-select: none;

但就iPhone本身而言，这还不够。事实证明放大镜仍然可以出现，例如，父元素会接受选择，或者只是因为感觉就像它。

然而，我发现了一些很酷的东西 - 如果你的元素为一个元素添加了touchend和click处理程序，那么Apple的Safari最终会避免导致放大镜的烦人的代码路径出现，可能意识到这个元素是用于某些UI交互，而不是选择文本。同样棒的是，如果你在靠近屏幕顶部的元素上执行此操作，它也会取消横向模式下导航的外观！不知道如何在点击底部的元素时取消导航的外观，是否有人有解决方案？

Answer 6

将此添加到CSS

body {
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */}