Ho un problema molto strano ... in ogni browser e versione mobile ho riscontrato questo comportamento:

• tutti i browser hanno un menu principale quando si carica la pagina (mostrando ad esempio la barra degli indirizzi) che scorre verso l'alto quando si inizia a scorrere la pagina.
• 100vh a volte viene calcolato solo sulla parte visibile di una finestra, quindi quando la barra del browser aumenta di 100vh (in termini di pixel)
• tutto il layout rivernicia e regola nuovamente poiché le dimensioni sono cambiate
• un brutto effetto nervoso per l'esperienza dell'utente

Come evitare questo problema? Quando ho sentito parlare di viewport-height ero eccitato e pensavo di poterlo usare per blocchi ad altezza fissa invece di usare javascript, ma ora penso che l'unico modo per farlo sia in realtà javascript con qualche evento di ridimensionamento ...

puoi vedere il problema su: sito di esempio

Qualcuno può aiutarmi con / suggerire una soluzione CSS?

semplice codice di prova:

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

Purtroppo questo è intenzionale ...

Questo è un problema ben noto (almeno in Safari Mobile), che è intenzionale, in quanto previene altri problemi. Benjamin Poulain ha risposto a un bug del webkit :

Questo è completamente intenzionale. Ci è voluto un bel po 'di lavoro da parte nostra per ottenere questo effetto. :)

Il problema di base è questo: l'area visibile cambia in modo dinamico durante lo scorrimento. Se aggiorniamo l'altezza del viewport CSS di conseguenza, dobbiamo aggiornare il layout durante lo scorrimento. Non solo sembra una merda, ma farlo a 60 FPS è praticamente impossibile nella maggior parte delle pagine (60 FPS è il framerate di base su iOS).

È difficile mostrarti la parte "sembra merda", ma immagina mentre scorri, i contenuti si muovono e ciò che vuoi sullo schermo cambia continuamente.

L'aggiornamento dinamico dell'altezza non funzionava, avevamo alcune scelte: rilasciare le unità viewport su iOS, abbinare le dimensioni del documento come prima di iOS 8, utilizzare le dimensioni di visualizzazione piccole, utilizzare le dimensioni di visualizzazione grandi.

Dai dati che avevamo, l'utilizzo della dimensione della vista più grande era il miglior compromesso. La maggior parte dei siti Web che utilizzavano le unità di visualizzazione erano molto belli la maggior parte delle volte.

Nicolas Hoizey ha studiato un po 'questo: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

Nessuna correzione pianificata

A questo punto, non c'è molto da fare se non astenersi dall'usare l'altezza della finestra sui dispositivi mobili. Chrome è cambiato anche in questo nel 2016:

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

Puoi provare min-height: -webkit-fill-available;nel tuo css invece di 100vh. Dovrebbe essere risolto

nella mia app lo faccio in questo modo (dattiloscritto e postcss nidificato, quindi modifica il codice di conseguenza):

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

nel tuo 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);
    }
}

funziona almeno su Chrome Mobile e iPad. Ciò che non funziona è quando aggiungi la tua app alla schermata Home su iOS e cambi l'orientamento alcune volte - in qualche modo i livelli di zoom si confondono con il valore innerHeight, potrei pubblicare un aggiornamento se trovo una soluzione.

dimostrazione

Per molti dei siti che costruisco il client chiederà un banner da 100VH e proprio come hai trovato, si traduce in una brutta esperienza "saltellante" sul cellulare quando inizi a scorrere. Ecco come risolvo il problema per un'esperienza uniforme e uniforme su tutti i dispositivi:

Ho prima impostato il mio elemento banner CSS su height:100vh

Quindi uso jQuery per ottenere l'altezza in pixel del mio elemento banner e applicare uno stile in linea usando questa altezza.

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

In questo modo si risolve il problema sui dispositivi mobili come quando la pagina viene caricata, l'elemento banner viene impostato su 100vh utilizzando CSS e quindi jQuery lo sostituisce inserendo CSS in linea nel mio elemento banner che ne impedisce il ridimensionamento quando un utente inizia a scorrere.

Tuttavia, sul desktop se un utente ridimensiona la finestra del browser, il mio elemento banner non verrà ridimensionato perché ora ha un'altezza fissa impostata in pixel a causa di jQuery sopra. Per risolvere questo problema, utilizzo Mobile Detect per aggiungere una classe "mobile" al corpo del mio documento. E poi avvolgo il jQuery sopra in un'istruzione if:

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

Di conseguenza, se un utente si trova su un dispositivo mobile, la classe "mobile" è presente sul corpo della mia pagina e viene eseguito il jQuery sopra. Quindi il mio elemento banner otterrà il CSS in linea applicato solo sui dispositivi mobili, mentre sul desktop rimane in vigore la regola CSS originale da 100 VH.

Guarda questa risposta: 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>

Mi è venuto in mente un componente React: verificalo se usi React o sfogli il codice sorgente se non lo fai, in modo da poterlo adattare al tuo ambiente.

Imposta l'altezza del div a schermo intero su window.innerHeighte quindi lo aggiorna al ridimensionamento della finestra.

Dato che stavo cercando una soluzione qualche giorno, ecco la mia per tutti quelli che usano VueJS con Vuetify (la mia soluzione utilizza v-app-bar, v-navigation-drawer e v-footer): ho creato App.scss (utilizzato in App. vue) con il seguente contenuto:

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

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

Per me un simile trucco ha fatto un lavoro:

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

@nils lo ha spiegato chiaramente.

Qual è il prossimo, allora?

Sono appena tornato a utilizzare il relativo 'classico' %(percentuale) nei CSS.

Spesso è uno sforzo maggiore per implementare qualcosa di quanto non userebbe vh, ma almeno hai una soluzione abbastanza stabile che funziona su diversi dispositivi e browser senza strani problemi di interfaccia utente.

Ho appena trovato un'app Web che ho progettato presenta questo problema con iPhone e iPad e ho trovato un articolo che suggerisce di risolverlo utilizzando query multimediali destinate a dispositivi Apple specifici.

Non so se posso condividere il codice di quell'articolo qui, ma l'indirizzo è questo: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

Citando l'articolo: "abbina semplicemente l'altezza dell'elemento all'altezza del dispositivo usando le query multimediali che hanno come target le versioni precedenti di iPhone e iPad".

Hanno aggiunto solo 6 query multimediali per adattare gli elementi a tutta altezza e dovrebbe funzionare poiché è completamente implementato con CSS.

Modifica in sospeso: al momento non riesco a provarlo, ma tornerò e riferirò i miei risultati.

Dato che sono nuovo, non posso commentare altre risposte.

Se qualcuno è alla ricerca di una risposta per far funzionare questo (e può usare javascript - come sembra essere richiesto per farlo funzionare al momento) questo approccio ha funzionato abbastanza bene per me e tiene conto anche del cambiamento di orientamento mobile. Uso Jquery per il codice di esempio, ma dovrebbe essere fattibile con vanillaJS.

-Prima di tutto, utilizzo uno script per rilevare se il dispositivo è touch o hover. Esempio di ossa nude:

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

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

Ciò aggiunge classe all'elemento body in base al tipo di dispositivo (hover o touch) che può essere utilizzato in seguito per lo script height.

-Successivamente utilizzare questo codice per impostare l'altezza del dispositivo al caricamento e al cambio di orientamento:

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 è impostato in modo che il dispositivo calcoli correttamente la nuova altezza al cambio di orientamento. Se non c'è alcun timeout, nella mia esperienza l'altezza non sarà corretta. 500ms potrebbero essere un esagerato ma ha funzionato per me.

-100vh sui dispositivi hover è un fallback se il browser sovrascrive i CSS 100vh.

Il codice seguente ha risolto il problema (con jQuery).

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

E gli altri elementi usano %come unità da sostituire vh.

Ecco una soluzione che ho usato per la mia app React.

iPhone 11 Pro e iPhone Pro Max - 120px

iPhone 8 - 80px

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

È una soluzione di compromesso ma relativamente semplice

Per me ha funzionato:

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

L' bodyavrà l'altezza finestra visibile e #your-app-containercon height: 100%renderà tale contenitore prendere l'altezza finestra visibile.

Speriamo che questa sia una variabile d'ambiente CSS definita dagli UA come suggerito qui: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

Poiché non verrà risolto, puoi fare qualcosa del tipo:

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

# css
.content {
  height: 80vh;
}

Per me è stata la soluzione più veloce e pura del giocare con JavaScript che non poteva funzionare su molti dispositivi e browser.

Basta usare il giusto valore di vhquale si adatta alle tue esigenze.

L'uso di VH su dispositivi mobili non funzionerà con 100 VH, a causa delle loro scelte di progettazione che utilizzano l'intera altezza del dispositivo senza includere alcuna barra degli indirizzi, ecc.

Se stai cercando un layout che includa altezze div proporzionali alla vera altezza della vista, utilizzo la seguente soluzione css pura:

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

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

Sono disponibili due opzioni per impostare l'altezza della finestra, impostare manualmente --devHeight su un'altezza che funzioni (ma sarà necessario immettere questo valore per ogni tipo di dispositivo per cui si sta codificando)

o

Usa javascript per ottenere l'altezza della finestra e quindi aggiorna --devheight al caricamento e all'aggiornamento del viewport (tuttavia ciò richiede l'utilizzo di javascript e non è una soluzione CSS pura)

Una volta ottenuta la corretta altezza della vista, è possibile creare più div in una percentuale esatta dell'altezza totale della vista semplicemente modificando il moltiplicatore in ogni div a cui si assegna l'altezza.

0,10 = 10% dell'altezza della vista 0,57 = 57% dell'altezza della vista

Spero che questo possa aiutare qualcuno;)

Puoi farlo aggiungendo il seguente script e stile

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

Stile

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

Prova html, body { height: 100% }qualcosa per l'effetto di 100VH sui dispositivi mobili.

Puoi provare a dare position: fixed; top: 0; bottom: 0;proprietà al tuo contenitore.