iOS 独立 App 300ms 点击延迟

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

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

开始咆哮

Apple 缺乏支持，独立应用程序对细节的关注确实令人难以置信；特别是从 9.3.5 版开始。

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

结束咆哮

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

我的script标签放在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;
    };