Mobile Safari $(window).hauteur() de la barre d'URL de divergence

Tldr

Si vous voulez juste pour interroger la hauteur de la fenêtre, de la croix-navigateur, et être fait avec elle, l'utiliser jQuery.documentSize et appel $.windowHeight(). Pour la mise en œuvre de votre propre solution, lisez la suite.

Quand utiliser jQuery ou la clientHeight du document

de jQuery $(window).height() est un wrapper pour document.documentElement.clientHeight. Il vous donne de la hauteur de la fenêtre d'affichage, à l'exclusion de l'espace couvert par navigateur, les barres de défilement. En général, il fonctionne très bien et jouit d'une quasi-universelle, prise en charge du navigateur. Mais il y a bizarreries sur mobile, et dans iOS en particulier.

• Dans iOS, la valeur de retour prétend que l'URL et les barres d'onglets sont visibles, même si elles ne le sont pas. Ils se cachent dès que l'utilisateur fait défiler l'écran et le navigateur commutateurs d'INTERFACE minimale. Hauteur de la fenêtre est ont augmenté de près de 60px dans le processus, et c'est pas reflète dans la clientHeight (ou jQuery).

• La clientHeight retourne la taille de la fenêtre d'affichage à disposition, pas de la fenêtre d'affichage visuel, et ne reflètent donc pas le zoom de l'état.

Donc... pas tout à fait aussi grand sur les mobiles.

Quand utiliser window.innerHeight

Il y a une autre propriété que vous pouvez interroger: window.innerHeight. Il

• renvoie la hauteur de la fenêtre,
• est basé sur la fenêtre d'affichage visuel, c'est à dire reflète le niveau du zoom,
• est mis à jour lorsque le navigateur entrée minimale de l'INTERFACE utilisateur (le navigateur Safari mobile),
• mais il comprend la superficie couverte par les barres de défilement.

Le dernier point signifie que vous ne pouvez pas il suffit de le déposer en tant que remplaçant. Aussi, il n'est pas pris en charge dans IE8, et brisé dans Firefox avant FF25 (octobre 2013).

Mais il peut être utilisé comme un remplacement sur mobile parce que les navigateurs mobiles présente des barres de défilement, à titre temporaire, de superposition qui ne consomment pas d'espace dans la fenêtre d'affichage - window.innerHeight et d.dE.clientHeight retourner la même valeur à cet égard.

Cross-browser solution

Donc une solution de navigateur, pour trouver la vraie hauteur de la fenêtre, les œuvres de ce genre (pseudo-code):

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

Le piège ici est de savoir comment déterminer la taille (largeur) de la barre de défilement pour un navigateur donné. Vous avez besoin d'exécuter un test pour elle. Il n'est pas particulièrement difficile - avoir un regard sur ma mise en œuvre ici ou la original par Ben Alman si vous le souhaitez.

Si vous ne voulez pas passer votre propre, vous pouvez également utiliser un composant de la mine - jQuery.documentSize - et être fait avec un $.windowHeight() appel.

OriginalL'auteur hashchange

Voici comment j'ai pensé à elle. Ses un processus en deux étapes.

Étape 1 - Vérifiez si l'appareil est un iPhone ou un iPod.

Étape 2 - Si c'est pour vérifier si le navigateur est 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'});  
    };
});

Puis utilisez le mobileSafari variable chaque fois que nécessaire pour exécuter le navigateur safari mobile code spécifique.

En commençant par le premier dispositif exclut les iPads et les ordinateurs de bureau, etc, qui peut également exécuter Safari. Puis, la deuxième étape règles de Chrome et d'autres navigateurs qui peuvent potentiellement exécuter sur ces appareils.

Voici un plus en profondeur la répartition de pourquoi je l'ai fait de cette façon - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

OriginalL'auteur Ethan H