iOS独立应用程序300毫秒单击延迟

去年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">

我尝试了各种各样的变种,没有运气.

很难找到关于独立应用程序的任何东西,不过这个明显的问题.

有谁知道为什么这个350ms延迟点击只发生在独立模式？作为一种解决方法,我不得不将fastclick带入项目,这并不理想.

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

解决方法

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

开始咆哮
苹果缺乏支持,对独立应用程序的细节关注真的令人难以置信;特别是从版本9.3.5开始.

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

您必须使用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;
    };