web-dev-qa-db-ja.com

ブラウザのサイズ（幅と高さ）

ブラウザの現在のサイズ（幅と高さ）を検出しようとしています。 jQueryでは$(document).width and $(document).heightを使用すると非常に簡単ですが、jQueryライブラリのサイズをプロジェクトに追加したくないので、組み込みのJavaScriptを使用するだけです。 JavaScriptで同じことを行うための短くて効率的な方法は何でしょうか？

javascriptjquerybrowser
45
dono
// first get the size from the window
// if that didn't work, get it from the body
var size = {
  width: window.innerWidth || document.body.clientWidth,
  height: window.innerHeight || document.body.clientHeight
}
81
Joel
function getWindowSize(){
 var d= document, root= d.documentElement, body= d.body;
 var wid= window.innerWidth || root.clientWidth || body.clientWidth, 
 hi= window.innerHeight || root.clientHeight || body.clientHeight ;
 return [wid,hi]
}

IEブラウザは、innerHeightとWidthを使用しない唯一のブラウザです。

しかし、「標準」はありません。ブラウザの実装だけです。

ボディをチェックする前にhtml（document.documentElement）clientHeightをテストします。0以外の場合、「ビューポート」の高さであり、body.clientHeightはボディの高さです。ウィンドウよりも大きい場合も小さい場合もあります。

後方モードは、ルート要素とボディからのウィンドウ（ビューポート）の高さに対して0を返します。

幅も同じです。

8
kennebec

これを試して;

 <script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight);
</script>
3
Enrique

ここにコードサンプルがあります

function getSize(){

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;


}
3
Sriwantha Attanayake

私のケースではwindow.innerWidthは、カスタムモーダルポップアップウィンドウの作成を伴いました。簡単に言えば、ユーザーがボタンをクリックすると、ブラウザの中央にポップアップが開き、ポップアップの背後に透明な黒いbkgdが表示されます。私の問題は、透明なbkgdを作成するためにブラウザーの幅と高さを見つけることでした。

window.innerWidthは幅を見つけるのに最適ですが、window.innerWidth and window.innerHeightスクロールバーを補正しないため、コンテンツが表示コンテンツ領域を超えている場合。値から17pxを差し引く必要がありました。

transBkgd.style.width = (window.innerWidth - 17) + "px";

サイトのコンテンツは常に目に見える高さを超えているため、使用できませんでしたwindow.innerHeight。ユーザーが下にスクロールすると、透明なbkgdがそのポイントで終了し、見た目が悪くなります。透明なbkgdをコンテンツの最後まで維持するために、document.body.clientHeight。

transBkgd.style.height = document.body.clientHeight + "px";

IE、FF、Chromeでポップアップをテストしましたが、全体的に見た目はきれいです。私はこれが元の質問にあまり従わないことを知っていますが、カスタムモーダルポップアップを作成するときに他の誰かが同じ問題に遭遇した場合に役立つかもしれないと思います。

2
Dzeimsas Zvirblis