jQueryのresize()の例
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[デモを試してください]