Mobile Safari $ (finestra) .height() discrepanza barra URL

Question

Sto provando a impostare un div fisso che è al 100% l'altezza della finestra. Ma il mobile safari non rileva l'altezza della finestra corretta. Pensa sempre che la barra degli URL sia parte dell'equazione.

Questo è quello che sto usando al momento, ma non tiene conto della barra degli indirizzi.

$(function(){ 
    $(document).ready(function(){ // On load 
     alert($.browser); 
     $('#right-sidebar').css({'height':(($(window).height()))+'px'}); 
    }); 
    $(window).resize(function(){ // On resize 
     $('#right-sidebar').css({'height':(($(window).height()))+'px'}); 
    }); 
}); 

Answer 1

Se Safari Mobile è l'unico browser che vi offrono il problema, si può sempre bersaglio che il browser in modo specifico e meno l'altezza della barra URL dalla vostra altezza totale. È possibile trovare l'altezza della barra degli URL per traccia ed errore, non ho idea di quanto sia alta

Answer 2

Ecco come l'ho capito. È un processo in due fasi.

Passaggio 1 - Controllare se il dispositivo è un iPhone o un iPod.

Fase 2 - Se è quindi controllare per vedere se il browser è Safari

// On document ready set the div height to window 
$(document).ready(function(){ 

    // Assign a variable for the application being used 
    var nVer = navigator.appVersion; 
    // Assign a variable for the device being used 
    var nAgt = navigator.userAgent; 
    var nameOffset,verOffset,ix; 


    // First check to see if the platform is an iPhone or iPod 
    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){ 
     // In Safari, the true version is after "Safari" 
     if ((verOffset=nAgt.indexOf('Safari'))!=-1) { 
      // Set a variable to use later 
      var mobileSafari = 'Safari'; 
     } 
    } 

    // If is mobile Safari set window height +60 
    if (mobileSafari == 'Safari') { 
     // Height + 60px 
     $('#right-sidebar').css('height',(($(window).height()) + 60)+'px'); 
    } else { 
     // Else use the default window height 
     $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'}); 
    }; 


}); 

// On window resize run through the sizing again 
$(window).resize(function(){ 
    // If is mobile Safari set window height +60 
    if (mobileSafari == 'Safari') { 
     // Height + 60px 
     $('#right-sidebar').css('height',(($(window).height()) + 60)+'px'); 
    } else { 
     // Else use the default window height 
     $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'}); 
    }; 
}); 

quindi utilizzare la variabile MobileSafari quando necessario per eseguire codice specifico Safari Mobile.

A partire dal dispositivo si eliminano dapprima iPad e desktop ecc. Che possono anche eseguire Safari. Quindi il secondo passaggio esclude Chrome e altri browser che possono potenzialmente essere eseguiti su questi dispositivi.

Ecco una più approfondita ripartizione del perché l'ho fatto in questo modo - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

Answer 3

Ciò è dovuto ad un errore di metodo() .height di jQuery.

per ottenere l'altezza corretta è possibile utilizzare:

$('#right-sidebar').height(window.innerHeight); 

Per assicurarsi che siete principalmente croce browser compatibile si può fare questo:

var height = window.innerHeight ? window.innerHeight : $(window).height(); 
$('#right-sidebar').height(height); 

Lo dico soprattutto come questo avrà inizio comportarsi in modo divertente se c'è una barra di scorrimento in basso.

Answer 4

TLDR

Se si desidera solo per interrogare l'altezza della finestra, cross-browser, e da fare con esso, utilizzare jQuery.documentSize e chiamare $.windowHeight(). Per implementare la tua soluzione, continua a leggere.

Quando utilizzare jQuery o clientHeight del documento

di jQuery $(window).height() è un wrapper per document.documentElement.clientHeight. Ti dà l'altezza della finestra, escludendo lo spazio coperto dalle barre di scorrimento del browser. In generale, funziona bene e gode del supporto quasi universale del browser. Ma ci sono quirks on mobile, and in iOS in particular.

• in IOS, il valore di ritorno finge che le barre di URL e scheda sono visibili, anche se non lo sono. Vengono nascosti non appena l'utente scorre e il browser passa all'interfaccia utente minima.L'altezza della finestra è aumentata di circa 60px nel processo, ovvero non riflessa nello clientHeight (o in jQuery).

• Il clientHeight restituisce la dimensione dello layout viewport, not the visual viewport e pertanto non riflette lo stato dello zoom.

Quindi ... non proprio così eccezionale sul cellulare.

Quando utilizzare window.innerHeight

C'è un'altra proprietà è possibile interrogare: window.innerHeight. Si

• restituisce l'altezza della finestra,
• si basa sulla finestra visiva, cioè riflette lo stato di zoom,
• viene aggiornato quando il browser entra minima UI (Safari Mobile),
• ma include l'area coperta dalle barre di scorrimento.

L'ultimo punto indica che non è possibile rilasciarlo come sostituzione. Inoltre, non è supportato in IE8 e rotto in Firefox prior to FF25 (ottobre 2013).

Ma può essere utilizzato in sostituzione sul mobile, perché i browser mobili presenti barre di scorrimento come una sovrapposizione temporanea che non consuma spazio nella finestra - window.innerHeight e d.dE.clientHeight restituire lo stesso valore a tale riguardo.

Cross-Browser soluzione

Quindi una soluzione cross-browser, per scoprire la vera altezza della finestra, funziona come questo (pseudo codice):

IF the size of browser scroll bars is 0 (overlay) 
    RETURN window.innerHeight 
ELSE 
    RETURN document.documentElement.clientHeight 

La cattura è come determinare la dimensione (larghezza) delle barre di scorrimento per un determinato browser. Devi eseguire un test per questo. Non è particolarmente difficile: dai uno sguardo allo my implementation here o allo original one by Ben Alman se lo desideri.

Se non si desidera eseguire il rollover, è anche possibile utilizzare un componente del mio - jQuery.documentSize - e farlo con un $.windowHeight() call.