311

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

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

4

7 に答える 7

491

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

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

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

$(window).resize(function() {

});
于 2010-06-15T11:17:35.153 に答える
39

ビューポート単位(CSS3)を試すことができます:

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

ブラウザのサポート

于 2013-05-27T00:26:40.627 に答える
27

1. 主な質問への回答

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

HTML5 の場合:

<!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 の仕様により、問題は十分に解決されます。「スクロール オーバーフローを非表示に変更してから元に戻す」ことを回避できると確信しています。これは、申し訳ありませんが、少し汚いトリックです。将来のプログラマーが使用できるように、コードに文書化してください。

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 Api にはエラー メッセージを理解するためのマニュアルが必要です。ばかげています。マニュアルや仕様書を探しに行く必要のない小さな間違いのために外部ドキュメントが必要になるのです。ライブラリは SELF-DOCUMENTED でなければなりません。私は今から 6 か月後に犯す可能性のある間違いに気を配りながらコードを書きますが、それはまだクリーンで反復のないコード、将来の開発者の間違いを防ぐために既に書かれているものになるように努めています。ライブラリを作成する人は、潜在的なプログラマーの間違いに対するフィードバックが豊富でなければならないと思います。たとえば、Google Api にはエラー メッセージを理解するためのマニュアルが必要です。ばかげています。マニュアルや仕様書を探しに行く必要のない小さな間違いのために外部ドキュメントが必要になるのです。ライブラリは SELF-DOCUMENTED でなければなりません。私は今から 6 か月後に犯す可能性のある間違いに気を配りながらコードを書きますが、それはまだクリーンで反復のないコード、将来の開発者の間違いを防ぐために既に書かれているものになるように努めています。ライブラリを作成する人は、潜在的なプログラマーの間違いに対するフィードバックが豊富でなければならないと思います。たとえば、Google Api にはエラー メッセージを理解するためのマニュアルが必要です。ばかげています。マニュアルや仕様書を探しに行く必要のない小さな間違いのために外部ドキュメントが必要になるのです。ライブラリは SELF-DOCUMENTED でなければなりません。私は今から 6 か月後に犯す可能性のある間違いに気を配りながらコードを書きますが、それはまだクリーンで反復のないコード、将来の開発者の間違いを防ぐために既に書かれているものになるように努めています。マニュアルや仕様書を探しに行く必要はありません。ライブラリは SELF-DOCUMENTED でなければなりません。私は今から 6 か月後に犯す可能性のある間違いに気を配りながらコードを書きますが、それはまだクリーンで反復のないコード、将来の開発者の間違いを防ぐために既に書かれているものになるように努めています。マニュアルや仕様書を探しに行く必要はありません。ライブラリは SELF-DOCUMENTED でなければなりません。私は今から 6 か月後に犯す可能性のある間違いに気を配りながらコードを書きますが、それはまだクリーンで反復のないコード、将来の開発者の間違いを防ぐために既に書かれているものになるように努めています。

于 2014-03-06T16:10:39.760 に答える
2

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

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

getViewport();

$(window).resize(function() {
    getViewport()
});
于 2016-06-08T08:50:09.867 に答える
1

CSS3 ビューポート ユニット (vh,vw) は iOS ではうまく再生されないことに注意してください。ページをスクロールすると、ビューポート サイズが再計算され、ビューポート ユニットを使用する要素のサイズも大きくなります。したがって、実際にはいくつかのJavaScriptが必要です。

于 2013-09-19T23:19:09.980 に答える