jQuery

resize（）

イベントはブラウザのサイズが変更されたときに発生し、このイベントは

$（window）

にのみバインドされます。 

$(window).resize(function () {
    $('#msg').text('Browser (Width : ' + $(window).width()
    + ' , Height :' + $(window).height() + ' )');
});

ブラウザの幅と高さの詳細を取得するには、

$（window）.width（）

と

$（window）.height（）

を使用します。

自分で試してみてください

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
    #browserInfo{
        padding:8px;
        border:1px solid blue;
        width:300px;
    }
</style>

</head>
<body>
  <h1>jQuery resize() example</h1>

  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="6894224149"></ins>
<script>
     (adsbygoogle = window.adsbygoogle ||[]).push({});
</script><h2>Try resize this browser</h2>

  <div id="browserInfo">
  </div>

<script type="text/javascript">

   $('#browserInfo').text('Browser (Width : '
                + $(window).width() + ' , Height :' + $(window).height() + ' )');

    $(window).resize(function () {
        $('#browserInfo').text('Browser (Width : ' + $(window).width()
                                 + ' , Height :' + $(window).height() + ' )');
    });

</script>
</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-resize-example.html[デモを試してください]


ブラウザイベント


jquery