Question

有没有办法确定访问者是在主屏幕上将我们的网站视为网络应用程序，还是定期通过ipad上的safari进行浏览？

Answer 1

我明白了：

确保存在正确的网络应用元信息：

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

然后添加此脚本

<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>

因此，window.navigator.standalone如果他们在全屏网络应用模式下查看，则为真。超级。

来源：这是针对iphone的，但它的工作方式相同，我知道如何做到这一点：http://www.bennadel.com/blog/1950-Detecting-iPhone-s-App-Mode-Full-Screen-Mode-For-Web-Applications.htm

Answer 2

我不确定这种行为会持续多久，但iOS会向服务器提供不同的UserAgent字符串，可用于检测网页是否被webapp或Safari浏览器请求。

Safari浏览器

Mozilla / 5.0（iPhone; CPU iPhone OS 8_1_1，如Mac OS X）AppleWebKit / 600.1.4（KHTML，类似Gecko）版本/ 8.0 Mobile / 12B436 Safari / 600.1.4

主屏幕按钮/ Web应用程序

Mozilla / 5.0（iPhone; CPU iPhone OS 8_1_1，如Mac OS X）AppleWebKit / 600.1.4（KHTML，如Gecko）Mobile / 12B436

请注意，它不包含UserAgent中的“Safari”。我已经确认这种行为至少可以追溯到iOS 7，但我想更进一步。

Answer 3

如果您只查找样式更改，您还可以使用媒体查询，最大高度为700px。在safari中，屏幕高度为660px，而在网络应用程序中为740px（在横向模式下）。如果您的应用以任一方向工作，您将需要高度/宽度组合。

确定网站是作为网络应用程序打开还是通过ipad上的常规游猎？

3 个答案:

Safari浏览器

主屏幕按钮/ Web应用程序