【问题标题】:Detect if iOS is using webapp检测 iOS 是否正在使用 webapp
【发布时间】:2013-08-01 09:11:16
【问题描述】:

我想知道是否可以检测 iOS 用户是否正在使用 webapp,或者只是使用 safari 浏览器以正常方式访问。

我想要实现的原因是,在 iOS 网络应用程序上,当用户单击链接时,他将被重定向到 Safari 浏览器。所以我使用以下解决方法让他留在 webapp 中(防止切换到 safari 浏览器)。

$( document ).on("click",".nav ul li a",
        function( event ){

        // Stop the default behavior of the browser, which
        // is to change the URL of the page.
        event.preventDefault();

        // Manually change the location of the page to stay in
        // "Standalone" mode and change the URL at the same time.
        location.href = $( event.target ).attr( "href" );

        }
    );

但我希望这种解决方法仅在用户使用 webapp 时发生,我希望它对 webapp 用户是有条件的。所以不在默认的 safari 浏览器上。

【问题讨论】:

    标签: javascript jquery html ios browser-feature-detection


    【解决方案1】:

    您必须使用一些 javascript 来检测这一点:

    <script>
    if (("standalone" in window.navigator) &&       // Check if "standalone" property exists
        window.navigator.standalone){               // Test if using standalone navigator
    
        // Web page is loaded via app mode (full-screen mode)
        // (window.navigator.standalone is TRUE if user accesses website via App Mode)
    
    } else {
    
        // Web page is loaded via standard Safari mode
        // (window.navigator.standalone is FALSE if user accesses website in standard safari)
    }
    </script>
    </head> 
    

    现在需要额外检查 "standalone" in window.navigator,因为某些浏览器没有 standalone 属性,并且您不希望代码在这些浏览器中崩溃。

    【讨论】:

    • 不错的简单答案!我搜索了stackoverflow ofc,但由于某种原因该主题没有弹出。甚至当我输入我的问题的标题时...谢谢!
    • 我会的,只需要再等 3 分钟 ;)
    • @koningdavid:很高兴为您提供帮助!
    • 在打字稿中使用 window.navigator['standalone']
    【解决方案2】:

    iOS 和 Chrome WebApp 的行为不同,这就是我关注的原因:

    isInWebAppiOS = (window.navigator.standalone == true);
    isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);
    

    【讨论】:

    • 小心window.matchMedia('(display-mode: standalone)').matches:在桌面Chrome弹出窗口中也是true
    猜你喜欢
    • 2018-07-29
    • 2011-06-19
    • 2013-03-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-15
    相关资源
    最近更新 更多