简体   繁体   English

确定站点是作为 web 应用程序打开还是通过 ipad 上的常规 safari 打开?

[英]Determine if site is open as web app or through regular safari on ipad?

Is there a way to determine if a visitor is viewing our site as a web app on their home screen or regularly through safari on ipad?有没有办法确定访问者是在他们的主屏幕上以 web 应用程序查看我们的网站,还是定期通过 ipad 上的 safari 来查看我们的网站?

I figured it out:我想到了:

Make sure proper web app meta info is there:确保存在正确的 web 应用元信息:

<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

Then add this script然后添加这个脚本

<script>
if (window.navigator.standalone == true) {
 document.write('<p>Welcome Home</p>');
}else{
 document.write('<p>Tap the + button and choose "Add to Home Screen"</p>');
 document.write('<link rel="apple-touch-icon-precomposed" href="icon@2x.png"/>');
}
</script>
</head> 

So, window.navigator.standalone will be true IF they are viewing in the fullscreen web app mode.因此,如果他们在全屏 web 应用程序模式下查看,则window.navigator.standalone将为真。 Super.极好的。

Source: This is for iphone but it works the same and is where i figured out how to do it: http://www.bennadel.com/blog/1950-Detecting-iPhone-s-App-Mode-Full-Screen-Mode-For-Web-Applications.htm资料来源:这适用于 iphone,但它的工作原理相同,我想出了如何做到这一点: http://www.bennadel.com/blog/1950-Detecting-iPhone-s-App-Mode-Full-Screen- Web 应用程序模式.htm

I'm not sure how far back this behavior goes, but iOS will present different UserAgent strings to the server which can be used to detect if the page is being requested by a webapp or safari browser.我不确定这种行为可以追溯到多远,但 iOS 将向服务器显示不同的 UserAgent 字符串,这些字符串可用于检测 webapp 或 safari 浏览器是否正在请求页面。

Safari Browser Safari浏览器

Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B436 Safari/600.1.4 Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B436 Safari/600.1.4

Home Screen Button/Web App主屏幕按钮/Web 应用程序

Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B436 Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_1 像 Mac OS X) AppleWebKit/600.1.4 (KHTML, 像 Gecko) Mobile/12B436

Notice it does not include 'Safari' in the UserAgent.请注意,它在 UserAgent 中不包含“Safari”。 I've confirmed that this behavior goes back to at least iOS 7, but I'd imagine even further.我已经确认这种行为至少可以追溯到 iOS 7,但我想更进一步。

If you are looking for only a style change you can also just use a media query for the max-height of 700px.如果您只寻找样式更改,您也可以使用媒体查询来获取最大高度 700 像素。 In safari the screen height it 660px while in a web app it's 740px (in landscape mode).在 safari 中,屏幕高度为 660 像素,而在 web 应用程序中为 740 像素(在横向模式下)。 You would need a height/width combo if your app works in either orientation.如果您的应用程序在任一方向上工作,您将需要一个高度/宽度组合。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Web Safari 上的 iPad 上的应用程序:在 touchmove 上取消 touchstart - Web App on Safari for iPad: Cancel touchstart on touchmove 无法使用SignalR在Safari ipad / iphone的同一Web应用程序中同时打开2个标签 - cannot open simultaneously 2 tabs within same web app on safari ipad/iphone using SignalR 我可以通过js Web应用程序通过Safari检索ipad唯一设备标识符吗? - Can I retrieve an ipad unique device identifier that through Safari with a js web app? 如何从iPad的本机应用程序在Safari中打开链接? - How do I open a link in Safari from a native app in iPad? Safari仅适用于iPad的网站损坏 - Broken site in safari for iPad only 防止 iPad web 应用程序显示 Safari 地址栏 - Prevent iPad web app from showing Safari address bar iPad OS如何确定iOS 13 Safari中的桌面版网站 - How does iPad OS determine what is a desktop site in iOS 13 safari 在iPad / Safari上Shopify网站冻结 - Shopify Site Freezing on iPad / Safari iPad Web 应用程序:使用 JavaScript 在 Z50DE9BC68C93DC32D8C7C905976 中检测虚拟键盘 - iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari? 在Safari中打开链接后,iPad Web应用程序冻结 - iPad web app freezes after opening a link in Safari
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM