2015-01-27 13 views
7

Ho due pulsanti fissati nella parte inferiore del mio sito web. In IOS questo ha un comportamento indesiderato: quando l'utente tocca il pulsante, vengono visualizzati "barra del browser in basso" e "barra degli indirizzi".Rileva JavaScript quando viene visualizzata la navigazione del navigatore del navigatore IOS

C'è un modo per rilevare se queste barre del browser sono "visibili" o "nascoste"? Quindi posso adattare le posizioni dei pulsanti?

Nello stato in cui sono visibili le barre ho aggiunto alcune marce in più in modo che siano in cima alla barra in basso. Ma voglio regolarlo quando le barre si nascondono.

Ho provato "onresize" e nonostante questo evento si attiva quando la barra mostra o nasconde $ (window) .height() rimane lo stesso. Quindi non riesco a rilevare con questo metodo se lo schermo è diventato più grande o più piccolo.

Qualcuno conosce una soluzione?

enter image description here

+0

Non è la risposta che si desidera ascoltare, ma a causa del ~ 40px "area morta" che blocca facendo clic sugli elementi fissati nella parte inferiore dello schermo (e alza invece la barra di navigazione) abbiamo consigliato a tutti i progettisti che la navigazione fissa in basso o pulsanti funzionali sono vietati. –

+0

Quindi non c'è modo di rilevare se queste barre sono visibili o no? Come lo risolvi quando vuoi che un pulsante di "ricerca" sia sempre visibile in modo che l'utente non debba scorrere fino alla fine di un "modulo filtri"? – NLAnaconda

+0

Dubito che sarai in grado di determinare qualsiasi cosa da quell'evento comunque. iOS gestisce le posizioni fisse in modo inadeguato in generale (aspetta solo di avere una casella di testo con focus). Io tendo ad optare per qualcosa di più simile all'approccio nascosto/auto di overflow qui ... http://plnkr.co/edit/Ihl6a3Tq47IBSGOdVsMM Sono andato avanti e spostato verso il basso (che in tutta onestà non ho testato su un dispositivo iOS ma ho la parte superiore quindi dovrebbe essere la stessa idea) – Jackie

risposta

8

La innerHeight della pagina cambia a seconda se la barra superiore è visibile. Sull'iPhone 6 Plus, lo della pagina è 628 quando viene visualizzato il navigatore superiore e 696 quando non lo è.

È possibile utilizzare la funzione onresize per determinare come è stato modificato innerHeight.

+0

Sembra funzionare! – NLAnaconda

Problemi correlati