Mam bardzo dziwny problem ... w każdej przeglądarce i wersji mobilnej napotkałem takie zachowanie:

• wszystkie przeglądarki mają górne menu po załadowaniu strony (na przykład pasek adresu), które przesuwają się w górę po rozpoczęciu przewijania strony.
• 100vh czasami jest obliczane tylko na widocznej części rzutni, więc gdy pasek przeglądarki przesuwa się w górę, 100vh zwiększa się (pod względem pikseli)
• cały układ ponownie maluje i dostosowuje od czasu zmiany wymiarów
• zły efekt skakania dla wygody użytkownika

Jak można uniknąć tego problemu? Kiedy po raz pierwszy usłyszałem o wysokości rzutni, byłem podekscytowany i pomyślałem, że mogę użyć jej do bloków o stałej wysokości zamiast javascript, ale teraz myślę, że jedynym sposobem na to jest w rzeczywistości javascript z pewnym zdarzeniem zmiany rozmiaru ...

problem można zobaczyć na: przykładowej stronie

Czy ktoś może mi pomóc z / sugerować rozwiązanie CSS?

prosty kod testowy:

/* 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>

Niestety jest to celowe…

Jest to dobrze znany problem (przynajmniej w safari na urządzeniach mobilnych), który jest celowy, ponieważ zapobiega innym problemom. Benjamin Poulain odpowiedział na błąd w pakiecie internetowym :

To jest całkowicie celowe. Osiągnięcie tego efektu wymagało z naszej strony sporo pracy. :)

Podstawowy problem jest następujący: widoczny obszar zmienia się dynamicznie podczas przewijania. Jeśli odpowiednio zaktualizujemy wysokość rzutni CSS, musimy zaktualizować układ podczas przewijania. Nie tylko to wygląda jak gówno, ale robienie tego przy 60 FPS jest praktycznie niemożliwe na większości stron (60 FPS to podstawowa liczba klatek na sekundę w iOS).

Trudno pokazać ci część „wygląda jak gówno”, ale wyobraź sobie, że podczas przewijania zawartość się przesuwa, a to, czego chcesz na ekranie, ciągle się zmienia.

Dynamiczna aktualizacja wysokości nie działała, mieliśmy kilka możliwości: upuść jednostki rzutni na iOS, dopasuj rozmiar dokumentu jak przed iOS 8, użyj małego rozmiaru widoku, użyj dużego rozmiaru widoku.

Z danych, które mieliśmy, najlepszym rozwiązaniem był użycie większego rozmiaru widoku. Większość stron internetowych korzystających z jednostek widoku wyglądała świetnie przez większość czasu.

Nicolas Hoizey dość dokładnie to zbadał: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

Brak zaplanowanej poprawki

W tym momencie niewiele można zrobić poza powstrzymaniem się od używania wysokości rzutni na urządzeniach mobilnych. Chrome zmienił się na to również w 2016 roku:

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

Możesz spróbować min-height: -webkit-fill-available;w swoim css zamiast 100vh. To powinno zostać rozwiązane

w mojej aplikacji robię to tak (maszynopis i zagnieżdżone postcss, więc odpowiednio zmień kod):

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

w twoim 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);
    }
}

działa przynajmniej na Chrome Mobile i iPadzie. To, co nie działa, to dodawanie aplikacji do ekranu głównego w systemie iOS i kilkakrotna zmiana orientacji - w jakiś sposób poziomy powiększenia psują się z wartością innerHeight, mogę opublikować aktualizację, jeśli znajdę rozwiązanie.

Próbny

W przypadku wielu witryn, które buduję, klient poprosi o baner 100vh, a jak już odkryłeś, powoduje to złe wrażenia na telefonie komórkowym, gdy zaczynasz przewijać. W ten sposób rozwiązuję problem, zapewniając płynne i spójne działanie na wszystkich urządzeniach:

Najpierw ustawiłem element banner CSS na height:100vh

Następnie używam jQuery, aby uzyskać wysokość mojego elementu banera w pikselach i stosuję styl wbudowany przy użyciu tej wysokości.

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

W ten sposób rozwiązuje się problem na urządzeniach mobilnych, gdy podczas ładowania strony element banner jest ustawiany na 100vh przy użyciu CSS, a następnie jQuery zastępuje to, umieszczając wbudowany CSS na moim elemencie banner, który powstrzymuje jego zmianę rozmiaru, gdy użytkownik zaczyna przewijać.

Jednak na pulpicie, jeśli użytkownik zmieni rozmiar okna przeglądarki, mój baner nie zmieni rozmiaru, ponieważ ma teraz stałą wysokość ustawioną w pikselach z powodu powyższego jQuery. Aby rozwiązać ten problem, używam Mobile Detect, aby dodać klasę „mobile” do treści mojego dokumentu. A potem zawijam powyższe jQuery w instrukcji if:

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

W rezultacie, jeśli użytkownik jest na urządzeniu mobilnym, klasa „mobile” jest obecna na treści mojej strony i powyższe polecenie jQuery jest wykonywane. Tak więc mój element transparentu zastosuje tylko wbudowany CSS na urządzeniach mobilnych, podczas gdy na komputerze oryginalna reguła 100vh CSS pozostaje na swoim miejscu.

Spójrz na tę odpowiedź: 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>

Wymyśliłem komponent React - sprawdź, czy używasz React lub przejrzyj kod źródłowy, jeśli nie, abyś mógł go dostosować do swojego środowiska.

Ustawia wysokość div pełnego ekranu na, window.innerHeighta następnie aktualizuje ją przy zmianie rozmiaru okna.

Gdy szukałem rozwiązania kilka dni, tutaj jest moje dla wszystkich korzystających z VueJS z Vuetify (moje rozwiązanie używa paska aplikacji, szuflady nawigacji i stopki): stworzyłem App.scss (używany w aplikacji. vue) o następującej treści:

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

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

Dla mnie taka sztuczka zadziałała:

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

@ nils wyjaśnił to jasno.

Co dalej?

Właśnie wróciłem do używania względnego „klasycznego” %(procentowego) w CSS.

Często potrzeba więcej wysiłku, aby zaimplementować coś, niż byłoby to potrzebne vh, ale przynajmniej masz dość stabilne rozwiązanie, które działa na różnych urządzeniach i przeglądarkach bez dziwnych usterek interfejsu użytkownika.

Właśnie znalazłem zaprojektowaną przeze mnie aplikację internetową, która ma ten problem z iPhone'ami i iPadami, i znalazłem artykuł sugerujący rozwiązanie tego problemu za pomocą zapytań o media skierowanych do określonych urządzeń Apple.

Nie wiem, czy mogę udostępnić kod z tego artykułu tutaj, ale adres jest następujący: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

Cytując artykuł: „po prostu dopasuj wysokość elementu do wysokości urządzenia za pomocą zapytań o media kierowanych na starsze wersje rozdzielczości iPhone'a i iPada”.

Dodali tylko 6 zapytań o media, aby dostosować elementy o pełnej wysokości, i powinno działać, ponieważ jest w pełni zaimplementowane w CSS.

Edycja w toku: Nie mogę teraz go przetestować, ale wrócę i przedstawię wyniki.

Ponieważ jestem nowy, nie mogę komentować innych odpowiedzi.

Jeśli ktoś szuka odpowiedzi, aby to zadziałało (i może korzystać z javascript - ponieważ wydaje się, że jest to w tej chwili wymagane), to podejście zadziałało dla mnie całkiem dobrze i uwzględnia również zmianę orientacji mobilnej. Używam Jquery dla przykładowego kodu, ale powinno być wykonalne z vanillaJS.

-Po pierwsze, używam skryptu, aby wykryć, czy urządzenie jest dotykane, czy unosi się. Przykład gołych kości:

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

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

Powoduje to dodanie klasy do elementu body zgodnie z typem urządzenia (najechanie myszą lub dotyk), którego można później użyć w skrypcie wysokości.

-Następnie użyj tego kodu, aby ustawić wysokość urządzenia przy obciążeniu i przy zmianie orientacji:

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");


}

-Timeout jest ustawiony tak, aby urządzenie poprawnie obliczało nową wysokość po zmianie orientacji. Jeśli nie ma limitu czasu, z mojego doświadczenia wynika, że ​​wysokość nie będzie poprawna. 500 ms może być przesadzeniem, ale zadziałało dla mnie.

Opcja -100vh na urządzeniach hover jest rezerwowa, jeśli przeglądarka zastępuje CSS 100vh.

Poniższy kod rozwiązał problem (z jQuery).

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

Pozostałe elementy wykorzystują %jako jednostkę do wymiany vh.

Oto obejście, którego użyłem w mojej aplikacji React.

iPhone 11 Pro i iPhone Pro Max - 120 pikseli

iPhone 8 - 80px

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

Jest to kompromis, ale stosunkowo prosta poprawka

Dla mnie działało:

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%;
}

bodyZajmie widoczną wysokość rzutni oraz #your-app-containerz height: 100%sprawi, że pojemnik ma widoczną wysokość rzutni.

Mamy nadzieję, że będzie to zmienna środowiskowa CSS zdefiniowana przez UA, jak sugerowano tutaj: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

Ponieważ nie zostanie to naprawione, możesz zrobić coś takiego:

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

# css
.content {
  height: 80vh;
}

Dla mnie było to najszybsze i czystsze rozwiązanie niż gra w JavaScript, która nie mogła działać na wielu urządzeniach i przeglądarkach.

Wystarczy użyć odpowiedniej wartości, vhktóra odpowiada Twoim potrzebom.

Korzystanie z vh na urządzeniach mobilnych nie będzie działać z 100vh, ze względu na ich wybór projektu przy użyciu całej wysokości urządzenia, bez pasków adresu itp.

Jeśli szukasz układu zawierającego wysokości div proporcjonalne do rzeczywistej wysokości widoku, używam następującego rozwiązania czystego css:

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

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

Masz dwie opcje ustawiania wysokości rzutni, ręcznie ustaw --devHeight na wysokość, która działa (ale musisz wprowadzić tę wartość dla każdego typu urządzenia, dla którego kodujesz)

lub

Użyj javascript, aby uzyskać wysokość okna, a następnie zaktualizuj --devheight po załadowaniu i odświeżeniu okienka ekranu (wymaga to jednak użycia javascript i nie jest czystym rozwiązaniem css)

Po uzyskaniu prawidłowej wysokości widoku można utworzyć wiele elementów div z dokładnym procentem całkowitej wysokości rzutni, po prostu zmieniając mnożnik dla każdego elementu div, do którego przypisano wysokość.

0,10 = 10% wysokości widoku 0,57 = 57% wysokości widoku

Mam nadzieję, że to może komuś pomóc;)

Możesz to zrobić, dodając następujący skrypt i styl

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

Styl

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

Spróbuj html, body { height: 100% }czegoś z efektem 100vh na urządzeniach mobilnych.

Możesz spróbować nadać position: fixed; top: 0; bottom: 0;właściwości swojemu kontenerowi.