URL barra di nascondersi durante lo scorrimento sul telefono pasticci '100% height' fino

Question

ho questa seguente sito web demo: http://woohooo.fortleet.com/

pezzi di contenuto così come la navigazione sono impostati per l'altezza al 100%. Quando sono sul mio telefono, c'è questa barra di url in alto che si nasconde quando faccio scorrere verso l'alto. Tuttavia, questo effetto scompone l'altezza del 100% perché si adatta alle nuove dimensioni del browser, creando un effetto sgradevole. Lo stesso vale per le unità 'vh' e 'vw'.

Ho provato la seguente:

function windowDimensions() { 

    if (html.hasClass('touch')) { 
    height = window.screen.height; 
    width = window.screen.width; 
    } else { 
    height = win.height(); 
    width = win.width(); 
    } 

} 

function screenFix() { 
    if (html.hasClass('touch')) { 

    touch = true; 
    nav.css({'height' : height + 'px'}); 
    home.css({'height' : height + 'px'}); 
    header.css({'height' : height/2 + 'px'}); 
    content.css({'min-height' : height + 'px'}); 

    } 
} 

Questo, tuttavia, crea un problema, perché in cima c'è questo bar con batteria, wifi, Info segnale che è anche accreditato come l'altezza dello schermo, rendendo un po 'più grandi gli elementi "100%" e "vh".

Non riuscivo a credere di non aver trovato altre domande al riguardo, poiché ritenevo che questo fosse un problema piuttosto comune per i siti 100%/100%.

Ragazzi, sapete qualche correzione per questo?

Answer 1

tuo meta tag viewport sembra che vada bene. 100vh non prenderà in considerazione il menu/wifi/barra superiore. Fornirà solo l'altezza del viewport, che non tiene conto della barra dei menu sui telefoni. È importante notare che 100 vh e il 100% non avranno la stessa altezza. Ho dato un'occhiata al tuo sito in mobile e sul desktop, ogni sezione sembra essere 100vh senza alcun padding aggiuntivo (quindi mi sembra corretto).

Se si fa riferimento alla barra dell'URL "iPhone" che si attiva e disattiva automaticamente durante lo scorrimento, non sarà possibile nascondere o alternare tale visualizzazione. La barra dell'URL si mostra quando scorri verso l'alto ... quindi sì ... potrebbe significare che avrai 20px o così non sarà visibile quando l'utente sta scorrendo verso l'alto. Tuttavia, di solito non è un problema, perché quando si scorre verso il basso IOS nasconde quella barra ... in modo da non influenzare la visualizzazione dello schermo. Questo potrebbe non rispondere alla tua domanda, ma la barra degli URL è ciò che pensavo volesse dire.

Answer 2

Sembra che il viewport non sia impostato correttamente. Sono abbastanza sicuro che non dovrebbe prendere in considerazione quei 10 - 20 pixel in più.

Se non lo hai già fatto, prova a impostare la porta meta meta e disabilitare tutte le opzioni di zoom. Spero che questo aiuti :)

Rif: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag