Отключить лупу для выделения текста при удержании касания в Mobile Safari/Webkit

Только что получил ответ от службы поддержки Центра разработчиков. Мне нужно было добавить это правило CSS:

-webkit-user-select: none;

Используйте эти коды CSS

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

Добавьте это в 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' */}

Это также полезно для защиты содержимого, которое вы не хотите копировать или сохранять, например изображения:

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

Это решило это для меня в JS:

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

Кажется, он обходит все, что есть в ОС, чтобы поймать прикосновение.

Я узнал об этом, когда пробовал сам. Прежде всего, вы должны добавить это правило к охватывающему элементу:

-webkit-user-select: none;

Но этого самого по себе на iPhone недостаточно. Оказывается, увеличительное стекло все еще может появиться, потому что, например, родительский элемент примет выделение, или просто потому, что так хочется.

Однако затем я обнаружил кое-что интересное: если ваш элемент добавляет обработчик touchend и click к элементу, то Safari от Apple, наконец, избегает раздражающего пути кода, вызывающего появление увеличительного стекла, вероятно, понимая, что этот элемент предназначен для некоторого взаимодействия с пользовательским интерфейсом. и не выделяя текст. Не менее замечательно то, что если вы сделаете это для элементов в верхней части экрана, это также отменит отображение навигации в ландшафтном режиме! Однако не уверен, как отменить появление навигации при нажатии на элементы внизу, есть ли у кого-нибудь решение для этого?