[英]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 浏览器是否正在请求页面。
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
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.