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

Question

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

但是，当我运行我的 Web 应用程序处于 standalone mode 时，延迟存在，而且非常明显。

这是我正在使用的元标记：

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

我试过这种变体，但运气不好。

很难找到关于独立应用程序的任何信息，none-少了这个明显的问题。

有谁知道为什么这个350ms的延迟点击只发生在单机模式下？作为解决方法，我不得不将 fastclick 引入项目，这并不理想。

注：我是运行宁iOS9.3.5/iPhone6

Answer 1

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

开始咆哮

Apple缺乏支持，独立应用程序对细节的关注真是令人难以置信；特别是从版本 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 
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function () {
                FastClick.attach(document.body);
            }, false);
        }
    }

   isIos = function () {
        // Reference: 
        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.
        // 
        var isRunningAndroidStandalone = window.matchMedia('(display-mode: standalone)').matches;

        return isRunningiOSStandalone || isRunningAndroidStandalone;
    };

Answer 2

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

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

Answer 3

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

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

iOS Standalone App 300ms Click Delay

mobile-safari

ios

iphone-standalone-web-app

fastclick.js