摆脱 iOS Web 应用程序中的放大镜答案

【问题标题】：Get rid of magnifying glass in iOS web app摆脱 iOS Web 应用程序中的放大镜
【发布时间】：2012-03-02 09:05:35
【问题描述】：

我目前正在探索适用于 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;
}

这很好用，但是当我触摸并按住文本时它仍然显示放大镜/放大镜：

有真正的解决方案吗？使用像 -webkit-magnifier: none 这样的简单 CSS 属性会很棒。如果有 JavaScript 解决方案，那也很好，但可能有点矫枉过正。

由于我使用的是 PhoneGap 并且它使用 UIWebView 来显示页面，因此可能有一种方法可以为此禁用放大镜 - 但我并没有过多地研究原生源代码。

提前致谢:-)

【问题讨论】：

这对我来说非常有效。我使用了 CSS 选择器 *.谢谢你。接受更多答案！
嗨 fnky，我也遇到了同样的问题，你找到解决办法了吗？，谢谢

标签： css ios html web-applications

【解决方案1】：

实现这一点的唯一方法是完全摆脱元素的选择，因为放大镜已合并。 -webkit-user-select:none; 应该应用于您不希望放大镜出现的所有元素。

【讨论】：

您可以在 untouchable 元素中看到已经应用了 -webkit-user-select:none; 属性 - 那为什么它不起作用呢？
您还将 -webkit-user-callout 设置为 none，所以我不确定您的问题可能是什么。请务必将这些属性设置为正确的元素，并检查您的 CSS 是否有任何遗漏的错误。
我确认你们都需要“-webkit-user-callout: none;”和“-webkit-user-select：无；”禁用放大镜
@Max，我在 phonegap 应用程序中遇到了同样的问题，但它不起作用。有什么我遗漏的吗？

【解决方案2】：

这是我用的

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

【讨论】：