6

JavaScriptを使用して訪問者のブラウザウィンドウの幅と高さを見つける方法を探していますが、最大ウィンドウサイズも見つけたいので、ユーザーがウィンドウを小さくまたは大きくすると、Facebookチャットのように一部の要素が自動的に位置またはサイズを変更します. 助言がありますか ？

4

4 に答える 4

10

ブラウザーの最大サイズ幅は、画面の幅と高さになります。

screen.height;
screen.width;

しかし、あなたがやろうとしていることには、CSS メディア クエリを使用します。

http://css-tricks.com/css-media-queries/

ウィンドウの幅が 500px 未満の場合、次のようにするとページの背景が黒くなります。

@media only screen and (max-width: 500px) {
  body {
    background: #000;
  }
}

アップデート：

ああ、メディアクエリをサポートしていない古いブラウザ用のポリフィルが必要になるでしょう:

https://github.com/scottjehl/Respond

これにより、IE6 までずっとメディア クエリを実行できます。

于 2013-03-10T21:29:09.937 に答える
0

あなたが使用することができwindow.innerWidthます window.innerHeight

css position 'fixed' または absolute を使用して、任意の dom 要素をウィンドウに対して相対的に配置できるため、ウィンドウのサイズ変更時に が再調整されます。

window.onresizeウィンドウのサイズ変更イベントをリッスンするために使用できます

jQuery 相当

$(window).width(); $(window).height()と$(window).resize(function(){});

于 2013-03-10T21:28:23.983 に答える
0

jQuery を使用できる場合は、クロスブラウザー方式でリスナーを設定するのは非常に簡単です。

$(window).resize(function() {
  alert($(window).width()) //window width
  alert($(window).height()) //window height
}).trigger("resize") //to ensure that you do whatever you're going to do when the window is first loaded;
于 2013-03-10T21:30:59.063 に答える