Ich habe ein sehr merkwürdiges Problem ... in jedem Browser und jeder mobilen Version ist dieses Verhalten aufgetreten:

• Alle Browser verfügen über ein Hauptmenü, wenn Sie die Seite laden (z. B. mit der Adressleiste), das beim Scrollen der Seite nach oben verschoben wird.
• 100vh wird manchmal nur im sichtbaren Teil eines Ansichtsfensters berechnet. Wenn also die Browserleiste nach oben gleitet, erhöht sich 100vh (in Pixel).
• Alle Layouts werden neu gestrichen und angepasst, da sich die Abmessungen geändert haben
• Ein schlechter Jumpy-Effekt für die Benutzererfahrung

Wie kann dieses Problem vermieden werden? Als ich zum ersten Mal von der Höhe des Ansichtsfensters hörte, war ich aufgeregt und dachte, ich könnte es für Blöcke mit fester Höhe verwenden, anstatt Javascript zu verwenden, aber jetzt denke ich, dass der einzige Weg, dies zu tun, tatsächlich Javascript mit einem Größenänderungsereignis ist ...

Sie können das Problem unter folgender Adresse sehen: Beispielseite

Kann mir jemand bei einer CSS-Lösung helfen / diese vorschlagen?

einfacher Testcode:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Leider ist das beabsichtigt ...

Dies ist ein bekanntes Problem (zumindest bei Safari Mobile), das beabsichtigt ist, da es andere Probleme verhindert. Benjamin Poulain antwortete auf einen Webkit-Fehler :

Dies ist völlig beabsichtigt. Wir haben viel Arbeit geleistet, um diesen Effekt zu erzielen. :) :)

Das Grundproblem ist folgendes: Der sichtbare Bereich ändert sich dynamisch, wenn Sie scrollen. Wenn wir die Höhe des CSS-Ansichtsfensters entsprechend aktualisieren, müssen wir das Layout während des Bildlaufs aktualisieren. Nicht nur das sieht scheiße aus, sondern das mit 60 FPS ist auf den meisten Seiten praktisch unmöglich (60 FPS ist die Grundframerate unter iOS).

Es ist schwer, Ihnen den Teil „sieht aus wie Scheiße“ zu zeigen, aber stellen Sie sich vor, während Sie scrollen, bewegt sich der Inhalt und was Sie auf dem Bildschirm wollen, ändert sich ständig.

Das dynamische Aktualisieren der Höhe funktionierte nicht. Wir hatten einige Möglichkeiten: Ansichtsfenstereinheiten unter iOS löschen, Dokumentgröße wie vor iOS 8 anpassen, kleine Ansichtsgröße verwenden, große Ansichtsgröße verwenden.

Aus den Daten, die wir hatten, war die Verwendung der größeren Ansicht der beste Kompromiss. Die meisten Websites mit Ansichtsfenster-Einheiten sahen die meiste Zeit großartig aus.

Nicolas Hoizey hat dies ziemlich genau untersucht: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

Kein Fix geplant

Zu diesem Zeitpunkt können Sie nur die Höhe des Ansichtsfensters auf Mobilgeräten verwenden. Chrome hat dies auch 2016 geändert:

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing

Sie können min-height: -webkit-fill-available;in Ihrem CSS statt versuchen 100vh. Es sollte gelöst werden

In meiner App mache ich das so (Typoskript und verschachtelte Postcss, also ändere den Code entsprechend):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

in deinem css:

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

es funktioniert zumindest auf Chrome Mobile und iPad. Was nicht funktioniert, ist, wenn Sie Ihre App unter iOS zum Homescreen hinzufügen und die Ausrichtung einige Male ändern. Irgendwie beeinträchtigen die Zoomstufen den Wert von innerHeight. Ich kann ein Update veröffentlichen, wenn ich eine Lösung dafür finde.

Demo

Für viele der Websites, die ich erstelle, wird der Client nach einem 100-VH-Banner fragen. Wie Sie festgestellt haben, führt dies zu einer schlechten "nervösen" Erfahrung auf Mobilgeräten, wenn Sie mit dem Scrollen beginnen. So löse ich das Problem für eine reibungslose, konsistente Erfahrung auf allen Geräten:

Ich habe zuerst mein Bannerelement CSS auf gesetzt height:100vh

Dann verwende ich jQuery, um die Höhe meines Bannerelements in Pixel zu ermitteln und mit dieser Höhe einen Inline-Stil anzuwenden.

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

Auf diese Weise wird das Problem auf Mobilgeräten behoben, da beim Laden der Seite das Bannerelement mithilfe von CSS auf 100 Vh gesetzt wird. JQuery überschreibt dies, indem Inline-CSS in mein Bannerelement eingefügt wird, wodurch die Größe geändert wird, wenn ein Benutzer mit dem Scrollen beginnt.

Wenn ein Benutzer auf dem Desktop die Größe seines Browserfensters ändert, wird die Größe meines Bannerelements jedoch nicht geändert, da aufgrund der obigen jQuery jetzt eine feste Höhe in Pixel festgelegt ist. Um dies zu beheben , verwende ich Mobile Detect , um dem Hauptteil meines Dokuments eine "mobile" Klasse hinzuzufügen. Und dann verpacke ich die obige jQuery in eine if-Anweisung:

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

Wenn sich ein Benutzer auf einem mobilen Gerät befindet, befindet sich die Klasse 'mobile' im Hauptteil meiner Seite und die obige jQuery wird ausgeführt. Mein Bannerelement erhält also nur das Inline-CSS, das auf Mobilgeräten angewendet wird, während auf dem Desktop die ursprüngliche 100-VH-CSS-Regel beibehalten wird.

Schauen Sie sich diese Antwort an: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Ich habe eine React-Komponente entwickelt. Überprüfen Sie, ob Sie React verwenden, oder durchsuchen Sie den Quellcode, wenn Sie dies nicht tun, damit Sie ihn an Ihre Umgebung anpassen können.

Es setzt die Höhe des Vollbild-Divs auf window.innerHeightund aktualisiert sie dann bei Fenstergrößenänderung.

Da ich einige Tage nach einer Lösung gesucht habe, ist meine für alle, die VueJS mit Vuetify verwenden (meine Lösung verwendet V-App-Leiste, V-Navigations-Schublade und V-Fußzeile): Ich habe App.scss erstellt (in App verwendet). vue) mit folgendem Inhalt:

.v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

Für mich hat ein solcher Trick einen Job gemacht:

height: calc(100vh - calc(100vh - 100%))

@nils erklärte es klar.

Was kommt dann als nächstes?

Ich bin gerade zurückgegangen, um den relativen "Klassiker" %(Prozentsatz) zu verwenden. in CSS zu verwenden.

Es ist oft mehr Aufwand, etwas zu implementieren, als es verwenden würde vh, aber zumindest haben Sie eine ziemlich stabile Lösung, die auf verschiedenen Geräten und Browsern ohne seltsame Probleme mit der Benutzeroberfläche funktioniert.

Ich habe gerade eine Web-App gefunden, die dieses Problem mit iPhones und iPads hat, und einen Artikel gefunden, in dem vorgeschlagen wird, das Problem mithilfe von Medienabfragen zu lösen, die auf bestimmte Apple-Geräte abzielen.

Ich weiß nicht, ob ich den Code aus diesem Artikel hier freigeben kann, aber die Adresse lautet: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

Zitat des Artikels: "Passen Sie einfach die Elementhöhe mit der Gerätehöhe an, indem Sie Medienabfragen verwenden, die auf ältere Versionen der iPhone- und iPad-Auflösung abzielen."

Sie haben nur 6 Medienabfragen hinzugefügt, um Elemente mit voller Höhe anzupassen, und es sollte funktionieren, da es vollständig CSS-implementiert ist.

Bearbeiten ausstehend: Ich kann es derzeit nicht testen, aber ich werde zurückkommen und meine Ergebnisse melden.

Da ich neu bin, kann ich keine anderen Antworten kommentieren.

Wenn jemand nach einer Antwort sucht, damit dies funktioniert (und Javascript verwenden kann - da dies derzeit erforderlich zu sein scheint), hat dieser Ansatz für mich ziemlich gut funktioniert und auch die Änderung der mobilen Ausrichtung berücksichtigt. Ich verwende Jquery für den Beispielcode, sollte aber mit vanillaJS machbar sein.

- Zuerst benutze ich ein Skript, um festzustellen, ob das Gerät berührt oder schwebt. Beispiel mit bloßen Knochen:

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

Dadurch wird dem Body-Element eine Klasse entsprechend dem Gerätetyp (Hover oder Touch) hinzugefügt, der später für das Höhenskript verwendet werden kann.

- Verwenden Sie diesen Code als Nächstes, um die Höhe des Geräts beim Laden und beim Ändern der Ausrichtung festzulegen:

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-Zeitüberschreitung ist so eingestellt, dass das Gerät die neue Höhe bei einer Orientierungsänderung korrekt berechnet. Wenn es keine Zeitüberschreitung gibt, ist die Höhe meiner Erfahrung nach nicht korrekt. 500ms sind vielleicht übertrieben, haben aber für mich funktioniert.

-100vh auf Hover-Geräten ist ein Fallback, wenn der Browser das CSS 100vh überschreibt.

Der folgende Code löste das Problem (mit jQuery).

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

Und die anderen Elemente werden %als Einheit zum Ersetzen verwendet vh.

Hier ist eine Problemumgehung, die ich für meine React-App verwendet habe.

iPhone 11 Pro und iPhone Pro Max - 120px

iPhone 8 - 80px

max-height: calc(100vh - 120px);

Es ist ein Kompromiss, aber eine relativ einfache Lösung

Folgendes hat bei mir funktioniert:

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

Das bodynimmt die sichtbare Höhe des Ansichtsfensters an und #your-app-containermit height: 100%wird dieser Container die sichtbare Höhe des Ansichtsfensters annehmen.

Hoffentlich ist dies eine UA-definierte CSS-Umgebungsvariable, wie hier vorgeschlagen: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

Da dies nicht behoben werden kann, können Sie Folgendes tun:

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

Für mich war es die schnellste und reinste Lösung als das Spielen mit JavaScript, das auf vielen Geräten und Browsern nicht funktionieren konnte.

Verwenden Sie einfach den richtigen Wert, der vhIhren Anforderungen entspricht.

Die Verwendung von vh auf Mobilgeräten funktioniert nicht mit 100vh, da das Design die gesamte Höhe des Geräts ohne Adressleisten usw. verwendet.

Wenn Sie nach einem Layout mit Div-Höhen suchen, die proportional zur tatsächlichen Ansichtshöhe sind, verwende ich die folgende reine CSS-Lösung:

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

Sie haben zwei Möglichkeiten, um die Höhe des Ansichtsfensters festzulegen. Stellen Sie --devHeight manuell auf eine Höhe ein, die funktioniert (Sie müssen diesen Wert jedoch für jeden Gerätetyp eingeben, für den Sie codieren).

oder

Verwenden Sie Javascript, um die Fensterhöhe zu ermitteln, und aktualisieren Sie dann --devheight beim Laden und Aktualisieren des Ansichtsfensters (dies erfordert jedoch die Verwendung von Javascript und ist keine reine CSS-Lösung).

Sobald Sie Ihre korrekte Ansichtshöhe erhalten haben, können Sie mehrere Divs mit einem genauen Prozentsatz der gesamten Ansichtsfensterhöhe erstellen, indem Sie einfach den Multiplikator in jedem Div ändern, dem Sie die Höhe zuweisen.

0,10 = 10% der Ansichtshöhe 0,57 = 57% der Ansichtshöhe

Hoffe das könnte jemandem helfen;)

Sie können dies tun, indem Sie das folgende Skript und den folgenden Stil hinzufügen

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }
  window.addEventListener('resize', appHeight);
  appHeight();

Stil

.module {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Versuchen Sie es html, body { height: 100% }mit etwas, das 100vh auf Mobilgeräten bewirkt.

Sie können versuchen, position: fixed; top: 0; bottom: 0;Ihrem Container Eigenschaften zuzuweisen.