requestFullScreen bei mobilen Endgeräten

[drsoong]

Hi,

ich nutze folgenden Code um einen FullScreen zu erzeugen.

function setFullScreen() {
    var doc = document.documentElement;

    if (typeof doc.requestFullscreen === 'function') {
       doc.requestFullscreen(); 
    } else if (typeof doc.mozRequestFullScreen === 'function') {
       doc.mozRequestFullScreen(); 
    } else if (typeof doc.webkitRequestFullScreen === 'function') {
       doc.webkitRequestFullScreen(); 
    } else if (typeof doc.msRequestFullscreen === 'function') {
       doc.msRequestFullscreen();
    }

}

Dummerweise startet jeder Seitenaufruf erst mal mit angezeigter Adressleiste und man muß jedesmal mit einem Wisch nach oben die Adressleiste ausblenden.

Was muß ich machen, damit die Adressleiste anfänglich ausgeblendet ist?

[hellbringer]

Also bei meinem Smartphone und Tablet wird Fullscreen gar nicht unterstützt.

Wenn du Fragen zu einem speziellen Endgerät hast, solltest du es auch nennen.

[drsoong]

hellbringer: Hm, ist das nicht Sache des Browsers, ob er eine Adressleiste anzeigt oder nicht. Was hat das denn mit dem Endgerät zu tun?

[hellbringer]

hellbringer: Hm, ist das nicht Sache des Browsers, ob er eine Adressleiste anzeigt oder nicht. Was hat das denn mit dem Endgerät zu tun?

Dann solltest du vielleicht sagen, welchen Browser du meinst.

Bei mobilen Geräten wird meist der vorinstallierte Browser verwendet. Deshalb habe ich von Endgeräten gesprochen.

[drsoong]

Ok, ich habe es mit Firefox, Chrome und Samsung Internet auf einem Galaxy S7 probiert. Alles zeigen das gleiche Verhalten, nämlich das die Adressleiste erst mal zu sehen ist.

[derwunner]

Vielleicht ist das ein Fokus Problem? Hast Du unten noch eine Touch Tastatur eingeblendet? Wenn ja, dann liegt der Fokus noch in der Adressleiste. Setzte mal den Fokus auf irgendein Element in der Seite und die Adressleiste sollte verschwinden.

[hellbringer]

Vielleicht ist das ein Fokus Problem? Hast Du unten noch eine Touch Tastatur eingeblendet? Wenn ja, dann liegt der Fokus noch in der Adressleiste. Setzte mal den Fokus auf irgendein Element in der Seite und die Adressleiste sollte verschwinden.

Könnte aber auch ein Sicherheitsfeature sein, damit der User mitbekommt, dass er sich auf einer Webseite befindet und nicht in einer nativen Anwendung.

[protestix]

Wahrscheinlich musst du erst warten bis die Seite komplett geladen ist.

[drsoong]

@derwunner: Danke für den Tip. Habe es mal mit Fokus auf irgendein Element versucht. Leider Fehlanzeige!

@protestix: Danke. Der Code läuft innerhalbs JQuery's $(document).ready(); Die Voraussetzung "Seite komplett geladen" müsste also erfüllt sein.

Das Ganze ist irgendwie sehr unbefriedigend. Ich will ja nur - ganz unschuldig - ein "App-Feeling" erzeugen. Natürlich soll der User weiterhin mit einem Swipe-Down die Adressleiste einblenden können.

Es gibt Sites, die eine deartige Manipulation des Browsers "ächten", was in Richtung hellbringers Sicherfeature gehen zu scheint.

Umgekehrt ist aber die sog. FullScreen API Bestandteil moderner Browser. Die ist allerdings nutzlos, wenn sie nicht macht wofür sie da ist.

[protestix]

Dann lies dir mal durch was es bedeutet die Fullscreen-API zu verwenden.
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API:


Das Element muss Fullscreen unterstützen, wie zum Beispiel video. Ist das bei dir der Fall?

[drsoong]

@protestix: Also ich beziehe mich ja auf dieses Element

 document.documentElement

, was auf dieser Site auch funktioniert.

Allerdings lese ich gerade

Note: Fullscreen requests need to be called from within an event handler or otherwise they will be denied.

So, habe es jetzt mal direkt mit einem Click-Ereignis vernüpft, was auch - Hurra - funktioniert.

Folgender Trick - angewandt wenn document ready - funktioniert aber leider ausgerechnet wieder nicht bei meinem Smartphone im Desktop Firefox hingegen schon. (wenn ich die phone-Bedingung mal weg lasse)

var screenKindNow = screenType();
        if (screenKindNow === 'phone') {
            $('#screenSizer').trigger('click'); // to get fullscreen mode for mobile devices right away
        }

Hat da jemand nochmal eine Idee?

[kaminbausatz]

Folgende Zeilen habe ich mir mal geschrieben (quick und dirty) weil ich einen kleine Graufilter-Rechner benötigte,

Das ganze wird ohne Adressbar angezeigt, also wie ein App, wenn ich es beim Handy dem Startbildschirm hinzufüge. Ansonsten fände ich es nicht so gut, wenn eine HTML Seite im Vollbildmodus auf dem Handy dargestellt wird. Wie will ich denn wieder zurück kommen in den normalen Modus? Beim PC drücke ich "Esc" und beim Handy? - wahrscheinlich muss ich dann für immer auf Deiner Seite bleiben .

Schau Dir dieses Minimalbeispiel mal an, evtl. hilft es Dir weiter, die Funktionalitär ist nicht drin, wäre sonst zu lang geworden - geht ja nur um´s Prinzip...Störe Dich auch nicht am CSS ist noch aus einer Zeit in der FlexBox noch nicht implementiert war...

<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="G1X-ND">
    <meta charset="UTF-8">
    <title>kleine WebApp</title>
    <style>
        *{margin:0px;padding:0px;}
        body{font-family: -apple-system-font, sans-serif;
            background:#ddffdd;}
        .oben, .unten{font:17/21px -apple-system-font; font-weight:bold;padding-top:5px;}
        .verschlusszeit{font:50px/50px -apple-system-font; font-weight:100;}
        .verschlusszeit_graufilter{font:50px/50px -apple-system-font; font-weight:300;}
        .zentriert{text-align:center;}
         .button{background-color:#aaf;margin:3px;padding: 5px 0px 5px 0px;font-weight:bold;border-radius:8px;cursor:pointer;border:1px solid #aaf;}
         .buttonno{background-color:#fff;margin:3px;padding: 5px 0px 5px 0px;font-weight:bold;border-radius:8px;border:1px solid #aaa;cursor:pointer;}
         .pointer{cursor:pointer;}

        #header{height:30px;background-color:#aaffaa;}    
        #footer{height:50px;background-color:#aaffaa;position:fixed;bottom:0px;width:100%;}    

        /* Range input */
        input[type="range"]{-webkit-appearance: none;background: #eee;width: 90%;margin-left:5%;height: 8px;border-radius: 8px;}
        input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none;background-color: #fff;width: 30px;
                            height: 30px;border-radius: 50%;background: #fff;box-shadow: 0px 2px 4px rgba(0,0,0,.2);
                            border: 1px solid #aaa;cursor: pointer;}


        /*responsives Design*/
        .zeile:before,.zeile:after {content:"";display:table;}
        .zeile:after {clear:both;}
        .spalte4{width:32%;display: block;float:left;margin: 1% 0 1% 2%;} .spalte4:first-child{margin-left: 0;}

        /*sichtbare Seiten*/
        .sichtbar{display:auto;}
        .unsichtbar{display:none;}
    </style>
</head>
<body>
<!-- Header -->    
    <div id="header">
        <p class="oben zentriert">G1X ND Filter</p>
    </div>

<!--Seite 1-->        
    <div id="seite1" class="sichtbar">
        <p class="verschlusszeit zentriert">1/1000</p>
        <p class="zentriert">gemessene Verschlusszeit</p>

        <div class="zeile" style="margin-top:10px;">
            <div class="spalte4"><p id="btn1" class="zentriert button">ND 4</p></div>
            <div class="spalte4"><p id="btn2" class="zentriert buttonno">ND 8</p></div>
            <div class="spalte4"><p id="btn3" class="zentriert button">ND 1000</p></div>
        </div>
        <p class="verschlusszeit_graufilter zentriert" style="margin-top:25px;">1/1000</p>
        <p class="zentriert">Verschlusszeit mit Graufilter</p>
        <p style="margin-top:30px;">
            <input type="range" min="0" max="30" value="0" id="range"/>
        </p>
    </div>    

<!--Seite 2-->    
    <div id="seite2" class="unsichtbar">
        <p class="verschlusszeit zentriert">Auswahl Graufilter</p>

        <div class="zeile" style="margin-top:10px;">
            <div class="spalte4"><p id="btna1" class="ndauswahl zentriert buttonno" data-select="0" data-wert="2">ND 2</p></div>
            <div class="spalte4"><p id="btna2" class="ndauswahl zentriert buttonno" data-select="0" data-wert="3">ND 3</p></div>
            <div class="spalte4"><p id="btna3" class="ndauswahl zentriert button" data-select="1" data-wert="4">ND 4</p></div>
        </div>
        <div class="zeile" style="margin-top:10px;">
            <div class="spalte4"><p id="btna4" class="ndauswahl zentriert button" data-select="1" data-wert="8">ND 8</p></div>
            <div class="spalte4"><p id="btna5" class="ndauswahl zentriert buttonno" data-select="0" data-wert="10">ND 10</p></div>
            <div class="spalte4"><p id="btna6" class="ndauswahl zentriert buttonno" data-select="0" data-wert="16">ND 16</p></div>
        </div>
        <div class="zeile" style="margin-top:10px;">
            <div class="spalte4"><p id="btna7" class="ndauswahl zentriert buttonno" data-select="0" data-wert="64">ND 64</p></div>
            <div class="spalte4"><p id="btna8" class="ndauswahl zentriert buttonno" data-select="0" data-wert="100">ND 100</p></div>
            <div class="spalte4"><p id="btna9" class="ndauswahl zentriert button" data-select="1" data-wert="1000">ND 1000</p></div>
        </div>
    </div>    

<!--Seite 3-->    
    <div id="seite3" class="unsichtbar">

        <p class="zentriert" style="margin-top:20px;">Kleine WebApp von:<br></p>
        <p class="verschlusszeit zentriert">kaminbausatz</p>

    </div>        

<!-- Footer -->
    <div id="footer">
        <div class="zeile">
            <div class="spalte4"><p id="home" class="zentriert pointer seiten" data-seite="seite1">
                <svg  version="1.0" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="40" height="40"
                    viewBox="0 0 46.375 46.375" overflow="visible" enable-background="new 0 0 46.375 46.375" xml:space="preserve">
                <g>
                <path d="M23.187,46.375c-6.412,0-11.881-2.26-16.403-6.784C2.262,35.068,0,29.601,0,23.187c0-6.413,2.262-11.881,6.783-16.403
                C11.305,2.261,16.774,0,23.187,0C29.6,0,35.067,2.261,39.59,6.784s6.785,9.991,6.785,16.403c0,6.393-2.263,11.855-6.785,16.389
                C35.067,44.108,29.6,46.375,23.187,46.375z M23.187,44.837c5.975,0,11.077-2.114,15.306-6.345
                c4.229-4.229,6.346-9.331,6.346-15.306c0-5.974-2.116-11.076-6.346-15.305c-4.229-4.229-9.331-6.345-15.306-6.345
                c-5.974,0-11.075,2.116-15.306,6.345c-4.229,4.229-6.344,9.332-6.344,15.305c0,5.975,2.116,11.077,6.344,15.306
                C12.111,42.723,17.213,44.837,23.187,44.837z M5.546,24.256H3.408v-2.139h2.138V24.256z M7.397,15.29l-1.851-1.066l1.067-1.848
                l1.851,1.064L7.397,15.29z M7.429,31.05l1.067,1.849l-1.852,1.064l-1.067-1.848L7.429,31.05z M13.454,8.428l-1.067-1.816
                l1.85-1.065l1.067,1.816L13.454,8.428z M13.486,37.878l1.85,1.065l-1.066,1.849l-1.851-1.064L13.486,37.878z M23.204,3.072
                l2.719,5.415h-1.566V22.87l4.07,7.052l1.347-0.783l0.345,6.046l-5.041-3.32l1.346-0.783l-2.534-4.387h-1.838v-3.198l-1.599-2.789
                l1.599-0.908V8.486h-1.537L23.204,3.072z M22.118,40.761h2.139v2.138h-2.139V40.761z M31.089,7.363l1.063-1.816L34,6.612
                L32.936,8.46L31.089,7.363z M31.089,38.944l1.816-1.065l1.063,1.85l-1.816,1.064L31.089,38.944z M37.883,32.899l1.063-1.849
                l1.849,1.065l-1.065,1.848L37.883,32.899z M37.945,13.44l1.815-1.064l1.065,1.848L39.01,15.29L37.945,13.44z M40.795,24.256v-2.139
                h2.139v2.139H40.795z"/>
            </g>
            </svg>

            </p></div>
            <div class="spalte4"><p id="info" class="zentriert pointer seiten" data-seite="seite3">
                <svg  version="1.0" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" height="40"
                    viewBox="0 0 24.839 47.909" overflow="visible" enable-background="new 0 0 24.839 47.909" xml:space="preserve">
                <g>
                <path fill="none" stroke="#000000" stroke-width="2" d="M20.026,15.519v19.259c0,1.524,0.139,2.641,0.415,3.348
                    s0.834,1.359,1.674,1.956c0.685,0.485,1.144,0.901,1.376,1.244c0.231,0.342,0.348,0.777,0.348,1.308
                    c0,2.851-3.613,4.276-10.84,4.276c-3.889,0-6.972-0.31-9.248-0.928c-0.773-0.222-1.398-0.608-1.873-1.16
                    c-0.475-0.553-0.713-1.183-0.713-1.89c0-0.597,0.122-1.061,0.365-1.393c0.243-0.331,0.862-0.861,1.856-1.591
                    c0.685-0.509,1.171-1.337,1.458-2.486c0.287-1.149,0.431-2.861,0.431-5.138c0-0.729-0.049-2.093-0.149-4.093
                    s-0.171-3.167-0.215-3.498c-0.133-0.906-0.751-1.602-1.856-2.088C1.685,22.049,1,21.165,1,19.994c0-1.392,0.895-2.431,2.685-3.116
                    c2.475-0.95,5.127-1.757,7.956-2.42c2.828-0.663,5.017-0.995,6.563-0.995C19.419,13.463,20.026,14.148,20.026,15.519z M13.464,1
                    c1.922,0,3.447,0.359,4.574,1.077s1.69,1.685,1.69,2.9c0,1.702-0.851,3.05-2.553,4.044c-2.695,1.569-5.955,2.354-9.778,2.354
                    c-1.613,0-2.895-0.31-3.845-0.928C2.271,9.651,1.63,8.547,1.63,7.132c0-1.9,1.359-3.392,4.077-4.475C8.469,1.552,11.055,1,13.464,1
                    z"/>
                </g>
            </svg>


            </p></div>
            <div class="spalte4"><p id="change" class="zentriert pointer seiten" data-seite="seite2">
                <svg  version="1.0" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="40" height="40"
                     viewBox="0 0 47.175 47.203" overflow="visible" enable-background="new 0 0 47.175 47.203" xml:space="preserve">
                <g>
                        <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                        M35.593,36.459c-5.228,4.957,3.891,5.738-2.723,8.619c-6.613,2.855-0.924-4.346-8.12-3.907c-7.172,0.415-0.681,6.91-7.585,4.835
                        c-6.905-2.052,2.066-3.905-3.72-8.227c-5.786-4.298-4.959,4.856-8.922-1.196c-3.962-6.031,4.084-1.661,2.431-8.691
                        c-1.678-7.032-6.904,0.513-6.078-6.666c0.827-7.178,4.206,1.367,7.416-5.103c3.233-6.469-5.617-4.052-0.389-9.033
                        c5.251-4.956,2.358,3.76,8.971,0.879c6.587-2.881-1.702-6.738,5.47-7.153c7.196-0.439-0.584,4.395,6.296,6.445
                        c6.905,2.075,3.015-6.25,8.801-1.928c5.763,4.296-3.281,2.954,0.682,8.984c3.963,6.054,6.32-2.832,7.973,4.199
                        c1.679,7.031-4.399,0.171-5.227,7.349c-0.826,7.177,6.662,1.881,3.428,8.351C41.088,40.685,40.821,31.48,35.593,36.459
                        L35.593,36.459z"/>
                        <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                        M35.448,23.595c0,6.567-5.324,11.913-11.864,11.913c-6.54,0-11.839-5.346-11.839-11.913c0-6.567,5.3-11.89,11.839-11.89
                        C30.124,11.705,35.448,17.027,35.448,23.595L35.448,23.595z"/>
                </g>
                </svg>
            </p></div>
        </div>
    </div>
</body>
<script>
    //vereinfacht die query´s
    var $ = function(id){return document.getElementById(id);};
    var q = function(id){return document.querySelectorAll(id);};

    // Das Seitenmenü
    var aktseite="seite1";
    var seiten=q(".seiten");    
    for (var j=0; j<seiten.length; j++){
        seiten[j].onclick = function(){
            $(aktseite).className ="unsichtbar";        
            aktseite=(this.getAttribute("data-seite"));
            $(aktseite).className ="sichtbar";
        }
    }

    //Seite 2 Button geklickt
    //hier kann man auswählen
    var anzahl_gewaehlt=3;    
    var ndauswahl=q(".ndauswahl");
    for (var i=0; i<ndauswahl.length; i++)
        {
            ndauswahl[i].onclick=function()    {
                if (this.getAttribute("data-select")=="0")
                    {
                        if (anzahl_gewaehlt==3){
                            alert("Maximal 3 Stück möglich! Bitte demarkieren Sie einen Filter und versuchen es dann nochmal!");
                            return;
                        }
                        this.classList.remove("buttonno");
                        this.classList.add("button");
                        this.setAttribute("data-select","1");
                        anzahl_gewaehlt+=1;                            
                    }else
                    {
                        if (anzahl_gewaehlt==1){
                            alert("Es muss mindesten 1 Filter ausgewählt werden!");
                            return;
                        }
                        this.classList.remove("button");
                        this.classList.add("buttonno");
                        this.setAttribute("data-select", "0");
                        anzahl_gewaehlt-=1;
                    }
            }
        }    
</script>
</html>

[drsoong]

@kaminbausatz: Danke muß gerade mal weg. Werde es später aber definitv testen.

Im Handy kannst Du den Fullscreen Mode verlassen entweder per Zurück-Taste (die des Handys) oder per vom Entwickler eigebaute ExitFullscreen - Taste.

Nochmals vielen Dank.

[hellbringer]

Dir ist aber schon bewusst, dass du ein Sicherheits-Feature von deinem Handy umgehen möchtest? Selbst wenn du es schaffst, hast du nicht die Garantie, dass nicht 1 Monat später die Lücke plötzlich geschlossen wird. Du solltest es also so verwenden, wie es vorgesehen ist und nicht herumtricksen. Eine Webseite ist nun mal keine App. Wenn du eine App möchtest, dann mach eine App.

[drsoong]

@hellbringer: Stimmt, so richtig sensibilisiert für den "Security Aspekt" war / bin ich wohl nicht.

Ich war halt erst mal der Meinung, dass das eine gute Sache sei und den User (Kunden) es freut, wenn man eine Web-App wie eine App benutzen kann.

FullScreen bei Launch scheint aber eben nicht vorgesehen zu sein.

Jetzt deswegen gleich eine App zu schreiben, ist wohl etwas aufwändig, zumindest langfristig, wenn ich an die vielen OS-Weiterentwicklungen auf den gängigen Plattformen denke.