Определить, открыт ли сайт как веб-приложение или через обычное сафари на ipad? - PullRequest
14 голосов
/ 28 июня 2011

Есть ли способ определить, просматривает ли посетитель наш сайт как веб-приложение на своем домашнем экране или регулярно через сафари на ipad?

Ответы [ 3 ]

23 голосов
/ 28 июня 2011

Я понял это:

Убедитесь, что есть метаинформация о веб-приложении:

<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, но он работает так же, и я понял, как это сделать:

1 голос
/ 05 декабря 2014

Я не уверен, насколько далеко зашло это поведение, но iOS представит на сервер разные строки UserAgent, которые можно использовать для определения, запрашивает ли страница веб-приложение или браузер Safari.

Браузер Safari

Mozilla / 5.0 (iPhone; процессор iPhone OS 8_1_1, как Mac OS X) AppleWebKit / 600.1.4 (KHTML, как Gecko) Версия / 8.0 Mobile / 12B436 Safari / 600.1.4

Кнопка главного экрана / веб-приложение

Mozilla / 5.0 (iPhone; процессор iPhone OS 8_1_1, как Mac OS X) AppleWebKit / 600.1.4 (KHTML, как Gecko) Mobile /12B436

Обратите внимание, что он не включает Safari в UserAgent.Я подтвердил, что это поведение восходит, по крайней мере, к iOS 7, но я бы даже подумал.

0 голосов
/ 16 августа 2011

Если вы ищете только изменение стиля, вы также можете просто использовать медиа-запрос для максимальной высоты 700 пикселей.В сафари высота экрана составляет 660 пикселей, а в веб-приложении - 740 пикселей (в альбомной ориентации).Вам понадобится комбо высоты / ширины, если ваше приложение работает в любой ориентации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...