Plein écran api HTML5 et Safari (iOS 6)

Je suis en train de faire une application de s'exécuter en mode plein écran (sans la barre du haut) dans Safari pour iOS 6.
Le code est comme suit:

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

Il fonctionne bien sur les navigateurs de bureau. Mais dans le navigateur Safari Mobile (iOS) 6 ne fonctionne pas.

Une idée sur ce problème?

OriginalL'auteur R.C. | 2012-10-10

  1. 19

    Il n'est pas pris en charge...

    http://caniuse.com/fullscreen

    c'est la bonne réponse à partir du 1er Déc.
    c'est la bonne réponse à partir du 11 février 2015 (le méta-à la place ?)
    C'est toujours la bonne réponse à partir du 11 septembre 2017. Si triste, cela m'aurait évité un autre jour de développement.
    2018 de l'enregistrement.... ios safari est le nouveau ie6

    OriginalL'auteur

  2. 6

    Vous ne pouvez pas utiliser la totalité de l'écran. Si vous définissez les balises meta correctement, et de mettre la web app sur l'écran d'accueil, puis vous pouvez vous débarrasser de tous les safari trucs, mais vous êtes de gauche avec l'iOS barre d'état (connectivité, horloge, batterie). 

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

    Il y a un certain nombre de ressources pour cela, voici celui que j'ai utilisé:

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

    Apple documentation est bien aussi:

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

    Mais, en bref, vous ne pouvez pas, comme d'iOS 6.1, de déployer un écran full web app sur les appareils iOS. La barre d'état sera toujours présente.

    Bonne référence. Mais j'ai une question à propos de ce mode. Savez-vous comment fermer l'application par programmation? Je veux dire avec javascript. J'ai essayé window.open(location.href, "_self").close(); Mais ça ne fonctionne pas. Merci

    OriginalL'auteur

  3. 3

    https://developer.apple.com/reference/webkitjs/htmlvideoelement

    if (elem.webkitEnterFullScreen) {
  elem.webkitEnterFullScreen();
}

    Cela fonctionne pour moi.

    Bon à savoir, mais c'est uniquement pour la vidéo? Sauf si vous faites un peu fou hacks - tels que l'encodage à la volée une image statique comme vidéo... (semble trop compliqué)

    OriginalL'auteur

  4. 3

    Six ans après cette question a été posée..., le "webkit"précédé d'API fullscreen semble désormais de travail mobile Safari dans iOS 12.1 sur un iPad, mais pas sur un iPhone. Il ne semble pas être signalés à CanIUse, et la seule Apple information que j'ai trouvé à ce jour sont des éléments concernant iOS 12 dans le "Ce qui est Nouveau dans Safari" de la page et notes de version et un tweet:

    Hier, j'ai mis à jour mon iPhone et de l'iPad pour iOS 12.1 de iOS 11.x. Le plein écran API travaille pour moi dans Safari sur l'iPad, mais pas l'iPhone. Sur l'iPad, "alert(document.fullscreenEnabled)" affiche "undefined", mais "alert(document.webkitFullscreenEnabled)" affiche "true". Sur l'iPhone, à la fois d'affichage "undefined".

    Jouer avec le script suivant, je suis capable de les afficher en mode plein écran dans Safari sur l'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's 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>

    Sur l'affichage en plein écran, Safari sur l'iPad insère un "X" élément de l'INTERFACE utilisateur dans le coin supérieur gauche de touche pour quitter le mode plein écran.

    Jouer avec les page de démonstration de un 2014 plein écran API tutoriel sur le Site du Point bien travaillé sur mon iPad. Méfiez-vous, en jouant avec les plus âgés, dépassées en page de démonstration de la version 2012 de le Site, Point de tutoriel deux fois gelé mon iPad dans Safari, et j'ai dû redémarrer l'iPad à s'échapper.

    Jouer avec les page de démonstration de la screenfull.js bibliothèque bien travaillé sur mon iPad.

    OriginalL'auteur

  5. 1

    Les parchemins suivants de la barre d'état dans iOS hors de la voie. L'appeler au début de votre $(document).prêt

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

    Cela fonctionne jusqu'à la version 6.x à l'instant, mais qui ne fonctionne pas dans la version bêta de iOS7 navigateur. Comme toujours, la barre d'outils du navigateur au fond est fixe.

    OriginalL'auteur