如何在 iPadOS15 Safari 中禁用放大镜

Question

我想禁用当我们长按任何 html 元素时出现的文本放大镜。

在IOS15中又开始出现了。

我尝试了以下方法，但它们在 iOS15 上不起作用。 在 iOS html 应用程序中禁用放大镜

您知道任何 CSS 属性或其他禁用它的方法吗？

Answer 1

使用-webkit-user-select: none;禁用文本-webkit-user-select: none; 对我不起作用。 我必须使用@Zhen Yao方法在 touchstart 事件中调用event.preventDefault() 。

另外：您可以在整个文档或特定元素上禁用放大镜，具体取决于您调用 touchstart 事件的元素。

/* disable on entire document */
//var htmlElement = document;

/* disable on specific html element */
var htmlElement = document.getElementById( 'some-html-id' );

htmlElement.addEventListener('touchstart', function( event ) { 
      event.preventDefault();
}, false);

示例小提琴： https : //jsfiddle.net/p3y71zL4/3/

Answer 2

该功能已在 iOS 15 中恢复，请参阅https://9to5mac.com/2021/06/07/ios-15-brings-back-the-magnifying-glass-for-accurate-text-selection/

一种解决方案是处理"touchstart"事件并在处理程序中调用event.preventDefault() 。

请注意，如果您仍想处理诸如"click"事件，则上述解决方案不起作用。

此外，Apple 通过允许使用-webkit-user-select: none;修复了 WebKit 中的问题-webkit-user-select: none; 要禁用放大镜，请参阅https://bugs.webkit.org/show_bug.cgi?id=231161