摆脱 iOS Web 应用中的放大镜

发布于 2025-01-04 16:43:46 字数 853 浏览 0 评论 0原文

我目前正在探索适用于 iOS 设备的 Web 应用程序，并使用 PhoneGap 创建一个“本机”应用程序。我遇到的问题是放大镜，我不想在选择段落（或文本位）时显示它。我尝试了很多解决方案，但都不起作用。我使用这个 CSS 来禁用我不需要的那些字段的所有复制、选择等：

*[untouchable] {
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;

    -webkit-touch-callout:  none;
    -webkit-user-select:    none;
    -khtml-user-select:     none;
    -moz-user-select:       none;
    -ms-user-select:        none;
    -o-user-select:         none;
    user-select:            none;
}

这工作正常，但当我触摸并按住文本时它仍然显示放大镜/放大镜：

触摸+按住在文本上显示放大镜

有真正的解决方案吗？如果有一个简单的 CSS 属性（例如 -webkit-magnifier: none 或类似的东西）那就太棒了。如果有一个 JavaScript 解决方案，那也很好，但可能有点矫枉过正。

由于我使用 PhoneGap 并且它使用 UIWebView 来显示页面，因此可能有一种方法可以禁用放大镜 - 但我还没有对本机源代码进行太多研究。

提前致谢：-）

原文

I am currently exploring web apps for iOS devices and use PhoneGap to create a "native" application out of it. The problem I have with this is the magnifying glass, that I don't want to be shown when selecting paragraphs (or bit of text). I have tried a lot of solutions but nether works. I use this CSS to disable all copy, selection and such for those fields I wan't:

*[untouchable] {
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;

    -webkit-touch-callout:  none;
    -webkit-user-select:    none;
    -khtml-user-select:     none;
    -moz-user-select:       none;
    -ms-user-select:        none;
    -o-user-select:         none;
    user-select:            none;
}

This works fine, but it still shows the magnifer/loupe when I touch and hold on text:

Touch + hold shows magnifier on text

Is there a real solution to this? It would be awesome with a simple CSS property such like -webkit-magnifier: none or something like that. If there's a JavaScript solution, that would be fine too, but maybe a overkill.

Since I am using PhoneGap and it uses UIWebView to show the page, there might be a way of disabling the magnifier for that - but I haven't looked that much into the native source.

Thanks in advance :-)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哑 2025-01-11 16:43:46

实现此目的的唯一方法是完全消除元素的选择，因为合并了放大器。 -webkit-user-select:none; 应应用于您不希望出现放大镜的所有元素。

回复收藏 0 原文

我家小可爱 2025-01-11 16:43:46

这是我用的

* {
        -webkit-touch-callout: none;
        -webkit-user-callout: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-modify: none;
        -webkit-highlight: none;
}

This is what I used

* {
        -webkit-touch-callout: none;
        -webkit-user-callout: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-modify: none;
        -webkit-highlight: none;
}

回复收藏 0 原文

~没有更多了~