WordPress Twenty Seventeen Header Scroll Mobile zoomt hinein

Ich verwende WordPress Twenty Seventeen für meine Website und habe ein Problem mit meinem Header-Bild auf Mobilgeräten. Wenn ich mit dem Scrollen beginne, wird das Header-Bild irgendwie vergrößert. Ich habe versucht, dieses Problem zu googeln, bin aber auf nichts gekommen. Ich habe versucht, den CSS-Code durchzugehen, und sehe keine Übergänge oder Elemente, die sich ändern, wenn ich inspizieren Sie sie, hier ist eine Beispielseite:

https://2017.wordpress.net/

Das Header-Bild ist kurz und wird beim Scrollen vergrößert. Gibt es eine Möglichkeit, dies zu verhindern, damit es vor dem Scrollen dieselbe Größe behält?

Dies geschieht, weil Mobile-Chrome die Adressleiste in die Viewport-Höhe berechnet und beim Scrollen der Webseite die Adressleiste ebenfalls scrollt und der sichtbare Bereich seine Höhe dynamisch ändert.

Bsp an 320px X 360px Bildschirm, auf Mobile-Chrome mit Adressleiste ist die Höhe des Ansichtsfensters 564px und nach dem Scrollen, wenn die Adressleiste verschwindet, ändert sich die Höhe des Ansichtsfensters zu 620px.

Ansichtsfensterhöhe mit Adressleiste

Ansichtsfensterhöhe ohne Adressleiste

Jetzt image in .wp-custom-header nehmen min-height:100%;height:100% Dadurch ändert sich die Höhe dynamisch, sodass das Bild beim Scrollen seine Dimension ändert.

Besser ist es, die Höhe des Bildes in Pixel festzulegen media queries.

.has-header-image .custom-header-media img{
    height: 620px;
    min-height: 0;
}

Ähnliches Problem:

css3-100vh-nicht-konstant-im-mobilen-browser

Hinzufügen position: relative; zu deiner Hülle img:

.wp-custom-header img {
    position: relative;
}

Die aktuelle Lage ist fixeddie in Verbindung mit object-fit: cover;verursacht den Zoom-Effekt.

Sie können folgendes CSS ausprobieren:

html, body {
    height:100%;
}
html {
    overflow: hidden;
}

body {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

Dadurch wird verhindert, dass die Browser die Adressleiste ausblenden. Also werden wir den Sprung los, während wir scrollen.

Ich habe dies in Ihrer URL ausprobiert und es funktioniert. Ich schlage vor, dies in geeigneten Medienanfragen zu verwenden.