Metodo multipiattaforma per rimuovere la barra degli indirizzi in un'app Web mobile

Sto lavorando a un'app Web mobile e sto cercando di rimuovere la barra degli indirizzi. È abbastanza facile, a meno che l'altezza naturale dello <body> non sia abbastanza alta da consentire lo scorrimento. Prova come potrei io non riesco a trovare un affidabile iPhone/Android, metodo cross device per assicurare che lo <body> sia abbastanza alto da consentire la scomparsa della barra degli indirizzi. Molti dei metodi che ho visto si basano su screen.height che rende la pagina TALLER del necessario. Dovrebbe essere ESATTAMENTE abbastanza alto da consentire alla barra degli indirizzi di andare via e non più alta!Metodo multipiattaforma per rimuovere la barra degli indirizzi in un'app Web mobile

Qualcuno ha uno script che lo gestisce perfettamente? Ho tutto quello che devo per determinare l'altezza della pagina meno la barra degli indirizzi per iPhone e Android.

ho provato:

screen.height //too tall 
window.innerHeight //too short 
document.documentElement.clientHeight //too short 
document.body.clientHeight //almost but too short

jQuery permesso.

fonte

2012-03-13 Fresheyeball

se jQuery è abilitato .. u può provare $ (finestra) .height(); oppure $ (documento) .height(); –

Ho provato entrambi. $ (finestra) fornisce l'altezza della finestra con la barra degli indirizzi. $ (documento) fornisce meno di quell'altezza in base all'altezza troppo corta della pagina in questione. – Fresheyeball

Ho avuto un problema simile non molto tempo fa, sottolineo in modo simile. Questo codice mi ha davvero aiutato: http://menacingcloud.com/?c=iPhoneAddressBar –

This site ha anche un paio di altri suggerimenti, ma questo senza fronzoli, senza preoccupare-uno è disponibile in una github:gist e risponde alla tua domanda (incollato qui per comodità):

function hideAddressBar() 
{ 
    if(!window.location.hash) 
    { 
     if(document.height < window.outerHeight) 
     { 
      document.body.style.height = (window.outerHeight + 50) + 'px'; 
     } 

     setTimeout(function(){ window.scrollTo(0, 1); }, 50); 
    } 
} 

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } }); 
window.addEventListener("orientationchange", hideAddressBar);

Per quanto posso dire, la combinazione di altezza extra aggiunta alla pagina (che ha causato problemi per te) e l'istruzione scrollTo() fa sparire la barra degli indirizzi.

Dallo stesso sito la soluzione 'semplice' per nascondere la barra degli indirizzi sta usando il metodo scrollTo():

In questo modo nascondere la barra degli indirizzi fino a quando l'utente scorre.

This site posti lo stesso metodo all'interno di una funzione di timeout (la giustificazione non viene spiegato, ma sostiene il codice non funziona bene senza di esso):

// When ready... 
window.addEventListener("load",function() { 
    // Set a timeout... 
    setTimeout(function(){ 
    // Hide the address bar! 
    window.scrollTo(0, 1); 
    }, 0); 
});

fonte

2012-04-01 19:41:48 ramblinjan

l'ultimo blocco di codice risolve questa sfida. Ma lo affronta con +50. Come facciamo a sapere che la barra degli indirizzi è alta 50px, in tutti i casi? – Fresheyeball

Ottieni un upvote per essere la prima persona a fornire una soluzione. – Fresheyeball

Il 50px è più o meno arbitrario, credo. L'istruzione scrollTo (0, 1) fa in modo che questa quantità extra non crei semplicemente lo stesso problema che si verifica quando si imposta l'altezza troppo grande. È la combinazione dei due che lo fa funzionare in tutti i casi, per quanto posso dire. – ramblinjan

Penso che il modo in cui funziona è la barra degli indirizzi è nascosta quando la pagina non si adatta. Quindi vuoi una pagina esattamente all'altezza della finestra, compresa la barra degli indirizzi, ad esempio window.outerHeight, no?

fonte

2012-04-01 19:37:45

Sto cercando l'altezza disponibile della pagina MENO la barra degli indirizzi. Altrimenti '$ (window) .height()' funzionerebbe bene. – Fresheyeball

Hm, ma in che modo questo aiuta a nascondere la barra degli indirizzi? –

Perché alcune pagine hanno pochissimi contenuti. Quindi la pagina potrebbe essere alta solo 20px in modo naturale. Quindi scorrere verso l'alto non fa nulla. L'unico modo per sbarazzarsi della barra degli indirizzi è quello di impostare la pagina in modo che sia sufficientemente alta da poter scorrere verso l'alto per rimuoverla. Trovare quell'altezza è il problema. – Fresheyeball

Metodo multipiattaforma per rimuovere la barra degli indirizzi in un'app Web mobile

risposta

Problemi correlati