jQueryを使用してビューポートのサイズを取得する

308

jQueryを使用してブラウザービューポートのサイズを決定し、ページのサイズが変更された場合にこれを再検出するにはどうすればよいですか？このスペースにIFRAMEサイズを作成する必要があります（各マージンに少し入ります）。

知らない人のために、ブラウザのビューポートはドキュメント/ページのサイズではありません。スクロール前のウィンドウの表示サイズです。

— ボロミケ
ソース

スクロールできる範囲だけでなく、デバイスの画面に表示されている領域を取得する方法はありますか？$（window）.height（）は、ズームされた部分ではなく、ドキュメントの全幅を返すのがわかります。ズームを適用した後、どの程度見えるか知りたい。

— フランクSchwieterman

appelsiini.net/projects/viewportこれでうまくいくはずです！:)

— Mackelito 2012年

1

これは質問への直接の回答ではありませんが、ビューポートに対する相対的な位置と可視性に従ってセレクターを操作したい場合に便利です。appelsiini.net / projects / viewport（plugin）

— WallaceSidhréeAug

484

ビューポートの幅と高さを取得するには：

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

ページのサイズ変更イベント：

$(window).resize(function() {

});

— SimaWB
ソース

18

私はこれをWindows IE6、IE8、FF3.6.3、Google Chrome 5.0.375.70、Opera 10.53、Safari 5.0（7533.16）でテストしました。これは、これらすべてで一貫して機能します。私はまた、UbuntuでFF3.6.3をテストしましたが、そこでも動作します。私はWordPress 2.9.2でjQuery 1.3を使用していると思いますが、これが機能するために必要でした。

— Volomike

48

スクロールできる範囲だけでなく、デバイスの画面に表示されている領域を取得する方法はありますか？$（window）.height（）は、ズームされた部分ではなく、ドキュメントの全幅を返すのがわかります。ズームを適用した後、どの程度見えるか知りたい。

— フランクSchwieterman

9

実際には、innerWidth/ innerHeightを使用する方がより正確です（ズームをカバーします）。

18

@FrankSchwieterman多分あなたのブラウザはあなたが望んでいるように振る舞っていないかもしれません：多分あなたはこの問題に遭遇しています：stackoverflow.com/q/12103208/923560。HTMLファイルに適切なDOCTYPE宣言が含まれていることを確認してください<!DOCTYPE html>。

— Abdull、2013

21

これは完全に間違っています。これにより、ビューポート（ドキュメント上のウィンドウのサイズ）ではなく、ドキュメントのサイズがわかります。

— Mike Bethany 2014年

39

ビューポートユニット（CSS3）を試すことができます。

div { 
  height: 95vh; 
  width: 95vw; 
}

ブラウザのサポート

— ヴィタリー・フェドレンコ
ソース

26

1.主な質問への回答

スクリプト$(window).height()は適切に機能します（ビューポートの高さを表示し、スクロールする高さのドキュメントは表示しません）が、ドキュメントにdoctypeタグを正しく配置する必要があります。たとえば、次のdoctype：

HTML 5の場合：

<!DOCTYPE html>

過渡的なHTML4の場合：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

おそらく、一部のブラウザで想定されているデフォルトのdoctype $(window).height()は、ブラウザの高さではなく、ドキュメントの高さを取ります。doctype仕様を使用すると、問題は十分に解決され、pepsは「スクロールオーバーフローを非表示にしてから元に戻す」ことを回避できると確信しています。 t将来のプログラマーの使用のためにコードにそれを文書化します。

2.補足のヒント、脇に注意してください。 さらに、スクリプトを実行している場合、プログラマーがライブラリを使用するのに役立つテストを考案できます。

~~$（document）.ready（function（）{~~

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      }

~~}）;~~

編集：パート2について、「追加のヒント、メモしてください」：昨日のコメント（2014-09-04）の@Machielは、完全に正しかった：$のチェックは、Jqueryの準備ができたイベント内に含めることはできません。彼が指摘したように、私たちは$がすでに定義されていると仮定しています。それを指摘してくれてありがとう、そしてあなたがスクリプトでそれを使用したのであれば、読者の皆さんがこれを修正してください。私の提案は次のとおりです：ライブラリに、ライブラリを初期化する「install_script（）」関数を配置します（ready（）の宣言を含む、このようなinit関数内に$への参照を置きます）およびそのような「install_script（）」関数の始まり、$が定義されているかどうかを確認しますが、JQueryから独立しているため、ライブラリはJQueryがまだ定義されていないときに「自己診断」できます。CDNからJQueryを自動的に作成するのではなく、この方法を使用します。これらは、他のプログラマーを助けるための小さなメモです。ライブラリを作成する人々は、潜在的なプログラマーの過ちに対するフィードバックをより豊かにする必要があると思います。たとえば、Google Apisはエラーメッセージを理解するために、別のマニュアルが必要です。あなたが行ってマニュアルや仕様を検索する必要がないいくつかの小さな間違いについて外部のドキュメントが必要になるのはばかげています。ライブラリは自己文書化されている必要があります。私は、6か月後も犯す可能性のあるミスを処理してコードを記述しますが、それでもクリーンで反復性のないコードになり、既に記述された、防止する未来の開発者のミスを犯します。ライブラリを作成する人々は、潜在的なプログラマーの過ちに対するフィードバックをより豊かにする必要があると思います。たとえば、Google Apisはエラーメッセージを理解するために、別のマニュアルが必要です。あなたが行ってマニュアルや仕様を検索する必要がないいくつかの小さな間違いについて外部のドキュメントが必要になるのはばかげています。ライブラリは自己文書化されている必要があります。私は、6か月後も犯す可能性のあるミスを処理してコードを記述しますが、それでもクリーンで反復性のないコードになり、既に記述された、防止する未来の開発者のミスを犯します。ライブラリを作成する人々は、潜在的なプログラマーの過ちに対するフィードバックをより豊かにする必要があると思います。たとえば、Google Apisはエラーメッセージを理解するために、別のマニュアルが必要です。あなたが行ってマニュアルや仕様を検索する必要がないいくつかの小さな間違いについて外部のドキュメントが必要になるのはばかげています。ライブラリは自己文書化されている必要があります。私は、6か月後も犯す可能性のあるミスを処理してコードを記述しますが、それでもクリーンで反復性のないコードになり、既に記述された、防止する未来の開発者のミスを犯します。マニュアルや仕様を検索する必要があります。ライブラリは自己文書化されている必要があります。私は、6か月後も犯す可能性のあるミスを処理してコードを記述しますが、それでもクリーンで反復性のないコードになり、既に記述された、防止する未来の開発者のミスを犯します。マニュアルや仕様を検索する必要があります。ライブラリは自己文書化されている必要があります。私は、6か月後も犯す可能性のあるミスを処理してコードを記述しますが、それでもクリーンで反復性のないコードになり、既に記述された、防止する未来の開発者のミスを犯します。

— デビッドL
ソース

2

あなたの投稿を読むのはとても難しいです。他の人と同じようにStackExchange Markdownに慣れるように、投稿をやり直してください。StackExchangeサイトがTinyMCEを使用しないのには理由がありますが、問題がある場合はMetaに参加してください。

— Volomike、2014年

を$使用して$を呼び出した後、の可用性を確認するのは少し奇妙です$(document).ready(function() { } );。jQueryが使用可能かどうかを確認するのは良いことですが、現時点ではまだ手遅れです。

— マキエル2014

@マキエル、あなたは完全に正しいです。幸い、私はスクリプトをチェックしたところ、readyイベントを使用していません。はい、ありがとうございます。あなたがこれを言ったとき、私は愚かに感じましたが、幸いにも、スクリプトでチェックが「install_this_script（）」と呼ばれる関数内にあることを確認しました。そのようなインストールでは、ライブラリのinit関数を呼び出しますが、その前に、（OUTSIDE JQUERY）で$オブジェクトが定義されているかどうかを確認します。とにかくありがとう、兄弟、あなたは本当に私をビックリさせました！この投稿が長すぎると思いますが、この間違いが他の読者に大きな害を与えていないことを願っています。投稿を修正しました。

— David L

これが本当の答えになるはずです！ありがとう！

— ジャスティンT.ワッツ

6

$（window）.resize（）を使用して、ビューポートのサイズが変更されたかどうかを検出できます。

jQueryには、スクロールバーが存在する場合に、viewport [1]の正しい幅と高さを一貫して検出する機能はありません。

Modernizrライブラリ、具体的にはJavaScriptのメディアクエリを開くmq関数を使用するソリューションを見つけました。

これが私の解決策です：

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

私の答えはおそらくiframeを100％ビューポートの幅に両側にマージンを付けてサイズ変更するのに役立ちませんが、ブラウザのJavaScriptビューポートの幅と高さの計算の一貫性に不満を抱いているWeb開発者に安心感を与えることを願っています。

多分これはiframeに関して役立つかもしれません：

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] $（window）.width（）および$（window）.height（）を使用して、一部のブラウザーでは正しく、他のブラウザーでは正しくない数値を取得できます。これらのブラウザーでは、window.innerWidthとwindow.innerHeightを使用して正しい幅と高さを取得できますが、ユーザーエージェントのスニッフィングに依存しているため、この方法はお勧めしません。

通常、ブラウザによっては、ウィンドウの幅と高さの一部としてスクロールバーが含まれているかどうかに一貫性がありません。

注：$（window）.width（）とwindow.innerWidthはどちらも、同じブラウザーを使用するオペレーティングシステムによって異なります。参照：https : //github.com/eddiemachado/bones/issues/468#issuecomment-23626238

— forsvunnet
ソース

4

function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });

— アヌラージ
ソース

$（window）.height（）を使用しても、ビューポートのサイズは得られません。ウィンドウ全体のサイズは得られます。これは通常、ドキュメント全体のサイズですが、ドキュメントがさらに大きくなることもあります。

— AnuRaj

幅に最適！

— 2016年

2

ロード時およびサイズ変更時のビューポートのサイズを取得するには（SimaWB応答に基づく）：

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});

— SandroMarques
ソース

1

CSS3ビューポートユニット（vh、vw）はiOSで適切に再生されないことに注意してください。ページをスクロールすると、ビューポートサイズが何らかの形で再計算され、ビューポートユニットを使用する要素のサイズも増加します。したがって、実際にはいくつかのJavaScriptが必要です。

— DAH
ソース