在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

将此添加到 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' */}

Answer 4

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

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

Answer 5

这在 JS 中为我​​解决了：

document.getElementsByTagName("body")[0].addEventListener("touchstart",
 function(e) { e.returnValue = false });

似乎绕过操作系统中的任何内容来捕捉触摸。