webentwicklung-frage-antwort-db.com.de

Verhindern Sie das Ausblenden der Adressleiste in mobilen Browsern

Ich arbeite gerade an einer Website mit horizontalem Layout. Alle Elemente sind Position: absolut mit Javascript. Ihre Größe wird mit window.innerHeight berechnet. Mein Problem ist, dass trotz der Elemente nicht höher als die Fensterhöhe ist, ich nach unten scrollen kann (Höhe der Adressleiste). Dies ist in zweierlei Hinsicht ärgerlich. Zuerst löst es das Fenster-Größenänderungsereignis aus, das ich zu diesem Zeitpunkt weder will noch brauche. Zweitens spielt es nicht gut mit einigen Inhaltsfeldern, deren Inhalt vertikal scrollbar sein sollte. Irgendwann kann ich die Boxen scrollen, aber manchmal wird zuerst die gesamte Seite gescrollt (wie gesagt: Höhe der Adressleiste). Gibt es eine Lösung, die es mir ermöglicht, diesen automatischen Ausblenden der Adressleiste auf allen Geräten zu verhindern? 

Danke im Voraus!

Das ist überhaupt nicht scrollbar: http://maxeffenberger.de/test.html

Dies kann horizontal gescrollt werden (ist sinnvoll, um verborgenen Inhalt zu sehen), ABER auch vertikal, bis die Adressleiste ausgeblendet ist (macht keinen Sinn, da es keinen zusätzlichen "vertikalen" Inhalt gibt, der mehr Platz benötigt: http://maxeffenberger.de /test2.html

20
Max Effenberger

So habe ich es erreicht:

            html{
                background-color: red;
                overflow: hidden;
                width:100%;
            }
            body{
                height:100%;
                position:fixed; /* prevent overscroll bounce*/
                background-color: lightgreen;
                overflow-y:scroll;
                -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */
                width:50%;                    
                margin-left:25%;
            } 
20
Submachine23

Die zuverlässigste Lösung kann die Verwendung der Vollbild-API sein: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

0
Matt Gaunt

wenn jemand dieses Problem immer noch mit der verdeckten Adressleiste hat, funktionierte es für mich. 

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

Ich probiere viel ähnlichen Code aus, aber Android Chrome brachte mich um. Nur das hat für mich funktioniert. Wenn Sie am unteren Rand der Seite eine Navigation haben, ist das Hauptproblem bei dieser automatisch ausgeblendeten Leiste.

0
Gh Doo

Verwenden Sie diesen Style-Code auf Ihrer Seite. Jetzt wird Ihre Chrom-URL-Leiste nicht ausgeblendet. Der Bildlauf wird angehalten.

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>
0