Question

去年webkit removed the 350ms delay for iOS。当我在Safari的移动浏览器中运行我的网站时，延迟不再存在，并按预期工作。

但是，当我在standalone mode中运行我的Web应用程序时，延迟存在，并且显而易见。

这是我使用的元标：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width">

我尝试了各种各样的变种，没有运气。

很难找到有关独立应用程序的任何信息，不过这个明显的问题。

有谁知道为什么这个350毫秒的延迟点击只发生在独立模式下？作为一种解决方法，我必须将fastclick带入项目，这不是理想的。

注意：我正在运行iOS 9.3.5 / iPhone 6

Answer 1

似乎没有本机解决方法，这似乎是一个已知问题，无论being fixed in webkit.

开始咆哮

苹果缺乏支持，对独立应用程序的细节关注真的令人难以置信;特别是版本9.3.5。

此问题与独立应用上的主要Youtube player issue之间。也许Apple应该不再担心移除耳机插孔，并添加一些神秘的“Touch Bar”，并实际修复他们该死的平台。

结束Rant

您必须使用FastClick来解决问题。仅将其应用于iOS。您可以更进一步，只将其应用于独立应用程序，因为如果应用程序不是独立的，它可以正常工作。

我的脚本标记放在DOM之后，初始化如下所示：

    if (isIos() && isRunningStandalone()) {
        // Initialize Fast Click
        // Even with the latest webkit updates, unfortunatley iOS standalone apps still have the 350ms click delay,
        // so we need to bring in fastclick to alleviate this.
        // See https://stackoverflow.com/questions/39951945/ios-standalone-app-300ms-click-delay
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function () {
                FastClick.attach(document.body);
            }, false);
        }
    }

   isIos = function () {
        // Reference: https://stackoverflow.com/questions/9038625/detect-if-device-is-ios#answer-9039885
        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    };

   isRunningStandalone = function () {
        // Bullet proof way to check if iOS standalone
        var isRunningiOSStandalone = window.navigator.standalone;

        // Reliable way (in newer browsers) to check if Android standalone.
        // https://stackoverflow.com/questions/21125337/how-to-detect-if-web-app-running-standalone-on-chrome-mobile#answer-34516083
        var isRunningAndroidStandalone = window.matchMedia('(display-mode: standalone)').matches;

        return isRunningiOSStandalone || isRunningAndroidStandalone;
    };

Answer 2

Apple最近发布了iOS 11（在我的情况下是11.2.6），对渐进式网络应用程序的支持更多（比如阅读manifest.json和其他PWA功能），最后似乎已经通过不再强加点击来解决了这个问题延迟。

Answer 3

当您在独立版本中运行它时，似乎运行不同的浏览器实例，可能是旧版本。我不知道是不知道修复也不是预期日期。

作为解决方法，您可以尝试 ontouchend 可能适合您的情况

iOS独立应用300毫秒点击延迟

3 个答案: