从主屏幕快捷方式启动的网站如何识别？

Question

我相对较新于Web开发，被要求添加一个弹出消息，建议用户将网站快捷方式添加到其移动主屏幕上。

我已经有了弹出窗口，但我的老板正在要求我检测用户是否从快捷方式启动了网站，以免再次显示弹出窗口，但我不确定是否可能实现。

非常感谢任何帮助或建议。

       if (navigator.userAgent.match(/Android|webOS|BlackBerry|IEMobile|Opera Mini/i)) {  
            $.fancybox({
               'width': '50%', //Use percentage to maintain responsiveness
               'height': '50%',
               'autoScale': true,
               'autoDimensions': false,
               'transitionIn': 'fade',
               'transitionOut': 'fade',
               'centerOnScroll': true,
               'type': 'inline',
               'href': '#mob_popup',
               padding: 8,
               helpers: {
                   overlay: {
                       css: {
                           'background': 'rgba(255, 255, 255, 0.45)'
                       }
                   }
               }


           });

- Cabrakan

---

你的快捷方式不能包含一些URL参数来区分它吗？ - A. Wolff

展示你如何实现弹出窗口。 - Sionnach733

在移动设备的URL中提供一些额外的参数 - Jain

有现成的插件可以为您处理弹出窗口和检测。我建议不要在这里重新发明轮子。 - xdumaine

对于弹出窗口，我使用了这个 Fancybox 工具： - Cabrakan

Jain，你能否提供更多关于你建议的信息？ - Cabrakan

Answer 1

使用JavaScript检查window.navigator.standalone属性。如果您从主屏幕启动，则该属性应为true，如果在Safari（或其他浏览器）中，则为false。

- cajunc2

---

在我看来，这可能有效，但目前只适用于iOS，问题在于Android。 - Cabrakan

Answer 2

• 对于iOS设备，请使用window.navigator.standalone === true
• 对于Android设备，请使用window.matchMedia('(display-mode: standalone)').matches

参考：类似问题的帖子

- Andrew