jquery - モバイルSafari$（window）.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'});
    });
});

score 14 · Accepted Answer

Tldr

ウィンドウの高さ、クロスブラウザーをクエリして、それで完了したい場合は、jQuery.documentSizeを使用してを呼び出します$.windowHeight()。独自のソリューションを実装するには、読み進めてください。

jQuery またはclientHeightドキュメントのをいつ使用するか

jQuery$(window).height()はのラッパーですdocument.documentElement.clientHeight。ブラウザーのスクロールバーで覆われたスペースを除いた、ビューポートの高さを示します。一般的に、それは問題なく動作し、ほぼユニバーサルなブラウザーサポートを享受します。しかし、モバイル、特に iOS には癖があります。

iOS では、戻り値は、URL とタブバーが表示されていなくても、それらが表示されているふりをします。ユーザーがスクロールしてブラウザが最小限の UI に切り替わるとすぐに非表示になります。このプロセスでウィンドウの高さが約 60 ピクセル増加しますが、これは(または jQuery には)反映されません。clientHeight
はビジュアルビューポートではなくレイアウトビューポートのclientHeightサイズを返すため、ズーム状態は反映されません。

だから... モバイルではそれほど素晴らしいとは言えません。

いつ使用するかwindow.innerHeight

クエリできる別のプロパティがあります: window.innerHeight. これ

ウィンドウの高さを返します。
視覚的なビューポートに基づいています。つまり、ズーム状態を反映しています。
ブラウザが最小限の UI (モバイル Safari) に入ると更新されます。
ただし、スクロールバーで覆われた領域が含まれます。

最後のポイントは、単に代替品としてドロップできないことを意味します。また、IE8 ではサポートされておらず、FF25 (2013 年 10 月) より前の Firefox では機能しません。

ただし、モバイルブラウザはビューポートのスペースを消費しない一時的なオーバーレイとしてスクロールバーを表示し、その点で同じ値window.innerHeightをd.dE.clientHeight返すため、モバイルでは代替として使用できます。

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

したがって、実際のウィンドウの高さを見つけるためのクロスブラウザーソリューションは、次のように機能します (疑似コード)。

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

ここでの問題は、特定のブラウザのスクロールバーのサイズ (幅) を決定する方法です。そのためのテストを実行する必要があります。特に難しいことではありません。必要に応じて、ここでの私の実装、またはBen Alman によるオリジナルの実装をご覧ください。

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

score 3 · Accepted Answer

これが私がそれを理解した方法です。その2段階のプロセス。

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

ステップ 2 - ブラウザがサファリかどうかを確認する

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

次に、必要に応じて mobileSafari 変数を使用して、モバイルサファリ固有のコードを実行します。

まずデバイスから始めて、Safari も実行できる iPad やデスクトップなどを除外します。次に、2 番目のステップで、これらのデバイスで実行される可能性のある Chrome やその他のブラウザーを除外します。

私がこのようにした理由の詳細な内訳は次のとおりです - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

jquery - モバイルSafari$（window）.height（）URLバーの不一致

3 に答える 3

Related

Reference