モバイルSafari $（ウィンドウ）.height（）URLバーの不一致

Question

私はウィンドウの高さの100％の固定divを設定しようとしています。しかし、モバイルサファリは正しいウィンドウの高さを検出しません。 URLバーは常に方程式の一部であると考えています。

これは私が現在使用しているものですが、URLバーを考慮していません。

$(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

モバイルサファリはあなたに問題を与える唯一のブラウザである場合、あなたは常に、特にそのブラウザをターゲットとマイナスあなたの全体の高さからURLバーの高さができます。 URLバーの高さはトレールとエラーでわかりますが、どのくらいの高さであるか分かりません。

Answer 2

ここで私はそれを理解しました。その2つのステップのプロセス。

ステップ1 - デバイスがiPhoneかiPodかを確認します。

は、ステップ2 - ブラウザ、モバイルサファリ固有のコードを実行するために必要な時はいつでも次にmobileSafari変数を使用

// 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'}); 
    }; 
}); 

サファリであるかどうかを確認された場合。

最初にデバイスから起動すると、Safariを実行できるiPadsやデスクトップなどが除外されます。次に、第2のステップでは、これらのデバイスで動作する可能性のあるChromeやその他のブラウザを除外します。 http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

Answer 3

これは、jQueryの.height（）メソッドのバグによるものである -

は、ここで私はこのようにそれをやった理由を、より深さの崩壊です。あなたは、あなたがこれを行うことができますほとんどクロスブラウザの互換性があるようにするには

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

：あなたが使用することができ、正しい高さを取得するために

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

をこれが開始されますように私はほとんど言います一番下のスクロールバーがあると面白いように振る舞います。

Answer 4

Tldr

あなただけのウィンドウの高さ、クロスブラウザを照会し、そしてそれを行うことが、jQuery.documentSizeを使用して$.windowHeight()を呼び出したい場合。独自のソリューションを実装するには、を参照してください。

のjQueryを使用する

や文書

jQueryの$(window).height()のclientHeightはdocument.documentElement.clientHeightのラッパーです。これは、ブラウザのスクロールバーで覆われたスペースを除き、ビューポートの高さを与えます。一般的に、それは正常に動作し、ほぼ普遍的なブラウザのサポートを楽しんでいます。しかし、quirks on mobile, and in iOS in particularがあります。 iOS版で

• 、戻り値はURLとタブバーは、彼らがいない場合でも、表示されていることをふり。ユーザーがスクロールしてブラウザーが最小限のUIに切り替わると、すぐに非表示になります。ウィンドウの高さは、プロセス内で約60ピクセル増加し、ではなくはclientHeight（またはjQuery）に反映されます。

• clientHeightは、layout viewport, not the visual viewportのサイズを返します。したがって、ズームの状態は反映されません。

モバイルではそれほど素晴らしいわけではありません。

window.innerHeight

を使用するときは、照会することができます別のプロパティがあります：window.innerHeightが。それ

• は、
• は、ブラウザが最小限のUI（モバイルサファリ）に入ったとき
• が更新され、つまりはズーム状態を反映して、視覚的なビューポートに基づいており、
• が、ウィンドウの高さを返します。スクロールバーで囲まれた領域が含まれます。

最後の点は、それを置き換えることができないことを意味します。また、IE8ではサポートされていません。また、Firefox prior to FF25（2013年10月）で壊れています。

モバイルブラウザでは、ビューポート内のスペースを消費しない一時的なオーバーレイとしてスクロールバーが表示されるため、window.innerHeightとd.dE.clientHeightは同じ値を返します。

クロスブラウザソリューション

だから、実際のウィンドウの高さを見つけるためのクロスブラウザのソリューションは、このように動作します（擬似コード）：

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

どのようにここでキャッチです指定されたブラウザのスクロールバーのサイズ（幅）を決定します。あなたはそれのためのテストを実行する必要があります。特に難しいことではありません。my implementation hereまたはoriginal one by Ben Almanをご覧ください。

あなた自身をロールしたくない場合は、私のコンポーネントであるjQuery.documentSizeを使用して、$.windowHeight() callで完了することもできます。