Полный экран api HTML5 и Safari (iOS 6)

Я пытаюсь запустить приложение в полноэкранном режиме (без верхней панели) в Safari для iOS 6. Код выглядит следующим образом:

var elem = document.getElementById("element_id");
if (elem.requestFullScreen) {
  elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

Это хорошо работает на настольных браузерах. Но в Mobile Safari (iOS) 6 не работает.

Есть ли идеи по этой проблеме?

ОТВЕТЫ

Ответ 2

Вы не можете использовать полный экран. Если вы правильно установили метатеги и разместили веб-приложение на главном экране, вы можете избавиться от всего сафари, но вы по-прежнему остаетесь в строке состояния iOS (подключение, часы, батарея).

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

Для этого существует целый ряд ресурсов, вот тот, который я использовал:

http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Собственная документация Apple также хороша:

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Но, короче говоря, с iOS 6.1 вы не можете развернуть полноэкранное веб-приложение на устройствах iOS. Строка состояния всегда будет присутствовать.

Ответ 3

Спустя шесть лет после того, как был задан этот вопрос... полноэкранный API "webkit" -prefixed теперь, похоже, работает в мобильном Safari в iOS 12.1 на iPad, но не на iPhone. Похоже, об этом еще не сообщалось в CanIUse, и единственная информация Apple, которую я нашел на данный момент, - это позиции, касающиеся iOS 12 на странице "Что нового в Safari", примечания к выпуску и твит:

Вчера я обновил свои iPhone и iPad до iOS 12.1 с iOS 11.x. Полноэкранный API работает для меня в Safari на iPad, но не на iPhone. На iPad "alert (document.fullscreenEnabled)" отображает "undefined", а "alert (document.webkitFullscreenEnabled)" отображает "true". На iPhone оба отображают "undefined".

Играя со следующим скриптом, я могу отображать в полноэкранном режиме в Safari на iPad.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #target {
            width: 150px; height: 100px; padding: 50px 0 0 0;
            margin: 50px auto; text-align: center;
            background-color: tan;
        }
    </style>
</head>
<body>
    <div id="target">Click or touch me</div>
    <script>
        (function(w) {
            "use strict";
            var d = w.document;
            var t = d.getElementById("target");

            t.addEventListener("click", function() {
                d.documentElement.webkitRequestFullscreen();
                // Compare alternative to preceding line, calling
                // method on target element instead:
                // t.webkitRequestFullscreen();
                // And compare changing target style on change:
                // t.style.width = "100%";
                // t.style.height = "100%";
            });

            // alerts "undefined" in iOS 12.1 Safari on iPad and iPhone
            alert(d.fullscreenEnabled);
            // alerts "true" in iOS 12.1 Safari on iPad, "undefined" on iPhone
            alert(d.webkitFullscreenEnabled);
        }(window));
    </script>
</body>
</html>

При отображении в полноэкранном режиме Safari на iPad вставляет элемент "X" в верхнем левом углу, чтобы коснуться, чтобы выйти из полноэкранного режима.

Игра с демонстрационной страницей учебника по полноэкранному API в 2014 году в Site Point также хорошо работала на моем iPad. Остерегайтесь, играя со старой, устаревшей демонстрационной страницей учебной версии Site Point 2012 года, дважды заморозил мой iPad в Safari, и мне пришлось перезагрузить iPad, чтобы уйти.

Игра на демонстрационной странице библиотеки screenfull.js также хорошо работала на моем iPad.

Ответ 5

Следующий прокручивает строку состояния в iOS. Назовите его в начале вашего $(документа).ready

$('body').scrollTop(1);

В настоящий момент это работает до версии 6.x, но, похоже, не работает в бета-версии браузера iOS7. Как всегда, панель инструментов браузера внизу фиксирована.

Ответ 6

Есть действительно хороший хак для эмуляции полноэкранного режима, и пользователь может войти или выйти из него, как он пожелает. Я действительно понятия не имею, почему он работает или работает на других платформах, но на моем iPhone Safari это выглядит так, как ожидалось.

Тем не менее, это решение имеет некоторые ограничения. Он может использоваться только для веб-приложений, которые не используют больше места, чем может предложить экран, и пользователь должен перейти в альбомный режим после загрузки страницы.

Дайте вашему html и телу 100% высоту и ширину

html, body {
  /* Avoid ugly scrollbars */
  overflow: hidden;
  /* Reset default browser paddings etc */
  margin: 0;
  padding: 0;
  border: 0;
  /* 100% size */
  width: 100%;
  height: 100%;
}

Теперь хакерская часть. Дайте вашему телу запас в 1 пиксель сверху

body {
  margin-top: 1px;
}

Последнее, что вам нужно сделать, это поместить весь контент вашего веб-приложения в дополнительный div с фиксированной позицией, чтобы поле не влияло на него.

.wrapper {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

И вуаля. Поверните устройство и увидите, что эти ужасные навигационные панели исчезают. Идеально подходит для настоящих полноэкранных игр.

Я уверен, что это можно использовать как полифилл, хотя не все хотят делать полноэкранную игру.

Надеюсь это кому-нибудь пригодится.

Дарт Мун

Ответ 7

Он работает на iPhone (iOS 12.1.4), когда вы включаете его:

Настройки → Safari → Дополнительно → Экспериментальные функции → Полноэкранный API

Ответ 8

@Том-Андрашек частично прав. Apple в последнее время отделила iPadOS от iOS (по состоянию на начало 2019 года), и они предложили поддержку полноэкранного API только на iPad Safari, немного позже, осенью прошлого года (2018). Вот как вы можете реализовать полную кросс-браузерную функциональность для вашего веб-приложения и, в частности, для iPadOS 12.x Safari:

Выход на полноэкранный режим на iPad Safari.

Раскрытие информации: я написал пост в блоге по указанной выше ссылке. Обратите внимание, что Chrome на iPadOS по-прежнему не поддерживает полноэкранный API, а iOS на iPhone практически не обсуждается.