Determine if site is open as web app or through re

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?

标签： ipad web-applications safari

3条回答

对你真心纯属浪费

2楼-- · 2020-05-19 02:33

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.

0人赞添加讨论(0) 举报

该账号已被封号

3楼-- · 2020-05-19 02:43

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.

0人赞添加讨论(0) 举报

虎瘦雄心在

4楼-- · 2020-05-19 02:58

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

0人赞添加讨论(0) 举报