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