web-dev-qa-db-ja.com

JavaScript-ブラウザーの高さを取得

ブラウザウィンドウ内の表示可能領域の高さを取得するコードスニペットを探しています。

私はこのコードを持っていましたが、ボディがウィンドウの高さを超えていない場合、それは少し戻ってきます。

document.body.clientHeight;

他にもいくつか試しましたが、NaNまたは上記と同じ高さを返します。

閲覧ウィンドウの実際の高さを取得する方法を知っていますか？

javascriptwindowheight
50
JasonS

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow から取得したこのようなものが必要です。

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

最新のブラウザではinnerHeight、documentElement.clientHeight IEの場合、body.clientHeight非推奨/癖の場合。

77
meder omuraliev

Jqueryを使用してみてください。

window_size = $(window).height();
45
Doc B PHP

window.innerHeightを使用できます

27
Gabriele Petrioli

私がそれをやりたい方法は、三項の割り当てでこのようなものです。

 var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
 var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

これをグローバルコンテキストで実行すると、その時点からwindow.heightとwindow.widthを使用できることに気付くかもしれません。

IEおよび私が知る限り他のブラウザで動作します（IE11でのみテストしました）。

とてもきれいで、私が間違っていなければ、効率的です。

16
techdude

たくさんのifステートメントよりも簡単な方法があります。または（||）演算子を使用します。

function getBrowserDimensions() {
  return {
    width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
    height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
  };
}

var browser_dims = getBrowserDimensions();

alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height);
3
Tanny O'Haley

これも動作するはずです。最初に、絶対位置と高さ100％の絶対<div>要素を作成します。

<div id="h" style="position:absolute;top:0;bottom:0;"></div>

次に、offsetHeightを介してその要素からウィンドウの高さを取得します

var winHeight = document.getElementById('h').offsetHeight;

更新：

function getBrowserSize() {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = 0;
    div.style.left = 0;
    div.style.width = '100%';
    div.style.height = '100%';
    document.documentElement.appendChild(div);
    var results = {
        width: div.offsetWidth,
        height: div.offsetHeight
    };
    div.parentNode.removeChild(div); // remove the `div`
    return results;
}

console.log(getBrowserSize());
3
Taufik Nurrohman
var winWidth = window.screen.width;
var winHeight = window.screen.height;

document.write(winWidth, winHeight);
1
FrEaKi

JQueryを使用すると、この$(window).innerHeight()を試すことができます（Chrome、FF、およびIEで動作します）。 bootstrap modalの場合、次のようなものを使用しました。

$('#YourModal').on('show.bs.modal', function () {
    $('.modal-body').css('height', $(window).innerHeight() * 0.7);
});
0
Mahib

私はちょうど私が考え出した方法を好む... JSなし... 100％HTMLとCSS：

（コンテンツのサイズに関係なく、中央に完全に中央揃えします。

HTMLファイル

<html><head>
<link href="jane.css" rel="stylesheet" />
</head>
<body>
<table id="container">
<tr>
<td id="centerpiece">
123
</td></tr></table>
</body></html>

CSSファイル

#container{
    border:0;
    width:100%;
    height:100%;
}
#centerpiece{
    vertical-align:middle;
    text-align:center;
}

td内に保持されている画像/ divをセンタリングするには、margin：autoを試してください。代わりにdivディメンションを指定します。 -とはいえ、「text-align」プロパティは単なるテキスト要素以上のものを揃えます。

0
josh.thomson

JQueryがオプションでない場合のJavaScriptバージョン。

window.screen.availHeight

0
Alexander C.