iOS独立应用程序300毫秒单击延迟 [英] iOS Standalone App 300ms Click Delay

问题描述

去年的Webkit 消除了iOS的350ms延迟.当我在Safari的移动浏览器中运行网站时，延迟不再存在，并且可以按预期工作.

但是，当我在独立模式，该延迟存在，并且非常明显.

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

<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

解决方案

似乎没有本机解决方法，并且这似乎是已知问题，无论 Youtube播放器之间在独立应用程序上发布.也许苹果应该停止担心卸下耳机插孔，并添加一些神秘的"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;
    };

Last year webkit removed the 350ms delay for iOS. When I run my website in Safari's mobile browser, the delay no longer exists, and works as expected.

However, when I run my web application in standalone mode, the delay exists, and is blatantly obvious.

Here's my metatag that I'm using:

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

I've tried variations of the sort, without luck.

It's hard to find anything about standalone applications, none-the-less this apparent issue.

Does anyone know why this 350ms delay click only occurs in standalone mode? As a workaround, I'm having to bring fastclick into the project, which isn't ideal.

Note: I'm running iOS 9.3.5 / iPhone 6

解决方案

There seems to be no native workaround, and this appears to be a known issue, regardless of being fixed in webkit.

Begin Rant

Apples lack of support, and attention to detail for standalone apps is truly unbelievable; especially as of version 9.3.5.

Between this issue, and the major Youtube player issue on standalone apps. Perhaps Apple should stop worrying about removing the headphone jack, and adding some mystical "Touch Bar, and actually fix their damn platform.

End Rant

You'll have to use FastClick to solve the issue. Apply it only to iOS. You can go further, and only apply it to standalone apps, as it works fine if the app isn't in standalone.

My script tag is placed after the DOM, and the initialization looks like this:

    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;
    };

这篇关于iOS独立应用程序300毫秒单击延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！