20

jQueryプラグインまたはストレートJavaScriptを使用してブラウザーのサイズを検出する方法はありますか？

結果が「ライブ」であることが望ましいので、幅または高さが変わると、結果も変わります。

4

6 に答える 6

60

JavaScript

function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;  // Display the width
    document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

jQuery

function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);      // Display the width
    $('#jqHeight').html(height);    // Display the height
};
$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size

jsfiddleデモ

編集： IE8以前をサポートするようにJavaScriptコードを更新しました。

于 2012-10-08T12:37:27.060 に答える
6

あなたが使用することができます

function onresize (){
   var h = $(window).height(), w= $(window).width();
   $('#resultboxid').html('height= ' + h + ' width: ' w);
}
 $(window).resize(onresize ); 

 onresize ();// first time;

html：

<span id=resultboxid></span>
于 2012-10-08T11:56:11.353 に答える
3

これにより、表示領域が返されます。

document.body.offsetWidth
document.body.offsetHeight

これは常にブラウザのサイズと同じだと思いますか？

于 2012-10-08T11:55:21.067 に答える
2

幅と高さの変数を好きな場所で使用してください...ブラウザのサイズが変わると、変数の値も変わります。

$(window).resize(function() {
    width = $(this).width());
    height = $(this).height());
});
于 2013-04-22T06:02:58.180 に答える
0

このような意味ですかwindow.innerHeight; window.innerWidth $(window).height(); $(window).width()

于 2012-10-08T11:56:01.550 に答える
0

次のようにサイズ変更時にリスナーを追加してみることができます

window.addEventListener('resize',CheckBrowserSize,false);
function CheckBrowserSize() 
{
    var ResX= document.body.offsetHeight;
    var ResY= document.body.offsetWidth;
}
于 2012-10-08T11:58:21.457 に答える