web-dev-qa-db-ja.com

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

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

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

jqueryresizesizeviewport
303
Volomike

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

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

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

$(window).resize(function() {

});
476
SimaWB

あなたは ビューポート単位 を試すことができます（CSS3）：

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

ブラウザサポート

39
Vitalii Fedorenko

1。主な質問に対する回答

スクリプト$(window).height()はうまく動作します（ビューポートの高さを表示し、スクロールする高さのある文書は表示しません）、しかし、あなたはあなたの文書に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が「スクロールオーバーフローを隠してから元に戻して変更する」ことを避けるのは確かだと思います。将来のプログラマの使用のためにコードにそれを文書化する。

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については、 "追加のヒントは、さておきメモ"：@Machielは、昨日のコメント（2014-09-04）で、正しかった：$のチェックはJqueryのreadyイベントの内側にすることはできません。彼が指摘したように、我々は$がすでに定義されていると仮定している。それを指摘してくれてありがとう、そしてあなたがあなたのスクリプトでそれを使用した場合、あなたの他の読者がこれを修正してください。私の提案は：あなたのライブラリにライブラリを初期化する "install_script（）"関数を入れること（そのようなinit関数の中に$への参照を入れる（ready（）の宣言を含む））そしてAT THE BEGINNING "install_script（）"関数で、$が定義されているかどうかをチェックしますが、JQueryから独立したものにして、JQueryがまだ定義されていないときにあなたのライブラリが "自分自身を診断"できるようにします。 CDNからJQueryを自動的に作成するよりも、この方法をお勧めします。これらは他のプログラマーの手助けをするための小さなメモです。私は、ライブラリを作成する人々は、潜在的なプログラマーのミスに対するフィードバックをもっと多く受けなければならないと思います。たとえば、Google Apisにはエラーメッセージを理解するための脇のマニュアルが必要です。マニュアルや仕様書を探す必要がないような、ちょっとした間違いのために外部の文書を必要とするのはばかげています。ライブラリはSELF-DOCUMENTEDでなければなりません。私は今から6か月経ってもコミットする可能性がある間違いにも気を配ってコードを書いていますが、それでもクリーンで繰り返しのないコードであり、将来の開発者の間違いを防ぐために書かれています。

25
David L

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

スクロールバーが存在する場合、jQueryにはビューポートの正しい幅と高さを一貫して検出するための機能はありません[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();

私の答えはたぶん100％のビューポート幅に両サイドにマージンを持たせてiframeのサイズを変更することを助けないでしょう、しかし私はそれが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

5
forsvunnet
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);
    });
2
AnuRaj

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

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

getViewport();

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

CSS3のビューポート単位（vh、vw）はiOS上ではうまく動かないことに注意してください。ページをスクロールすると、ビューポートのサイズはどういうわけか再計算され、ビューポート単位を使用する要素のサイズも大きくなります。そのため、実際には何らかのJavaScriptが必要です。

1
D.A.H