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?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
回答1:
I figured it out:
Make sure proper web app meta info is there:
<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. 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
回答2:
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.
Safari Browser
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
Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B436
Notice it does not include 'Safari' in the UserAgent. I've confirmed that this behavior goes back to at least iOS 7, but I'd imagine even further.
回答3:
If you are looking for only a style change you can also just use a media query for the max-height of 700px. In safari the screen height it 660px while in a web app it's 740px (in landscape mode). You would need a height/width combo if your app works in either orientation.
