iOS Web App: отображение контента только в том случае, если приложение автономно

Question

Если пользователь заходит на мой сайт, например, из Safari Mobile, как я могу разместить там пустую страницу с надписью «Добавить на домашний экран»? После добавления будет отображаться другой контент.

Answer 1

Вы хотите проверить две вещи.Во-первых, он работает на устройстве iOS?Во-вторых, window.navigator.standalone == true?

window.navigator.standalone в основном используется браузерами Webkit для указания того, что приложение находится в полноэкранном (или автономном) режиме.Многие устройства (например, телефоны с Android) поддерживают это свойство, но не имеют возможности «Добавить на главный экран», как это делают устройства на iOS, поэтому вам нужно проверить оба варианта.

Демонстрация:

Javascript:

function isIOS() {
    var userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test( userAgent );
};

function isStandalone() {
    return ( isIOS() && window.navigator.standalone );
};

window.onload = function () {
    if( isStandalone() || !isIOS() ) { //either ios+standalone or not ios
        //start app
    } else {
        //display add to homescreen page
    };
};

Answer 2

Чек window.navigator.standalone.

Answer 3

Небольшой незначительный другой код, основанный на решении @ThinkingStiff, и этот другой вопрос в этом Посте , чтобы поддержать обнаружение IOS7, чтобы предоставить интерфейс CSS для добавления дополнительного отступа в случае прозрачного заголовка приложения.

isIOS7 = function() {
  return navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
};
isStandaloneAndIOS7 = function() {
  return isIOS7() && window.navigator.standalone;
};
if (isStandaloneAndIOS7()) {
  body = document.getElementsByTagName("body")[0];
  body.className = body.className + " standalone";
}