iOS 独立应用 300ms 点击延迟答案

【问题标题】：iOS Standalone App 300ms Click DelayiOS 独立应用 300ms 点击延迟
【发布时间】：2016-10-10 05:46:22
【问题描述】：

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

【问题讨论】：

这个问题现在似乎在 iOS 11 独立网络应用程序中得到修复。另见：forums.developer.apple.com/thread/43415

标签： ios mobile-safari iphone-standalone-web-app fastclick.js

【解决方案1】：

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

Begin Rant

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

在此问题和独立应用程序上的主要Youtube player issue 之间。也许 Apple 应该停止担心移除耳机插孔，并添加一些神秘的“触控栏”，并真正修复他们该死的平台。

结束咆哮

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

【讨论】：

感谢您最近的回答。我不敢相信这仍然是 2017 年的事情！无论如何，没有人使用过 Apple 的“点击向下滚动”功能……

【解决方案2】：

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

【讨论】：

【解决方案3】：

当您以独立方式运行它时，它似乎运行不同的浏览器实例，可能是旧版本。恐怕也不知道修复或预期日期。

作为一种解决方法，您可以尝试 ontouchend 是否适合您的情况

【讨论】：