さまざまなブラウザウィンドウサイズを取得するJSメソッド_JavaScriptスキル

一般的に使用される:
JS ブラウザ ウィンドウ サイズの取得

コードのコピー コードは次のとおりです。

// ウィンドウの幅を取得します。
if (window.innerWidth)
winWidth = window.innerWidth
else if ((document. body) && ( document.body.clientWidth))
winWidth = document.body.clientWidth
// ウィンドウの高さを取得します
if (window.innerHeight)
winHeight = window.innerHeight; >else if ( (document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight
// Document の奥深くまで進んで本文を検出し、ウィンドウ サイズを取得します
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth; 🎜>

詳細:
各種ブラウザの表示ウィンドウサイズの取得について:
<script> </font>function getInfo() </strong>{ <br> var s = ""; <br>s = "Web ページの表示領域の幅:" document.body.clientWidth; <br>s = "表示領域の高さWeb ページの幅:" document.body.clientHeight; <br>s = "Web ページの表示領域の幅:" 領域の幅: " document.body.offsetWidth " (エッジとスクロールバー)"; <br>s = "Web ページの表示領域の高さ: " document.body.offsetHeight " (エッジの幅を含む)"; <br> s = "フルWeb ページ本文のテキストの幅:" document.body.scrollWidth; <br>s = "Web ページ本文の全テキストの高さ:" document.body.scrollHeight; <br>s = "Web のスクロールされた高さpage (ff):" document.body.scrollTop; <br>s = "Web ページがスクロールされる高さ(ie):" document.documentElement.scrollTop; <br>s = "Web ページがスクロールされる左側スクロールされています:" document.body.scrollLeft; <br>s = "Web ページのテキストの上部:" window.screenTop; <br>s = "Web ページのテキスト部分の左側:" window.screenLeft; <br>s = "画面解像度の高さ:" window.screen.height; <br>s = "画面解像度の幅:" window.screen.width; <br>s = "使用可能な画面の作業領域の高さ:" window .screen.availHeight; <br>s = "画面の使用可能な作業領域の幅:" " window.screen.availWidth;<br> <br>s = "あなたの画面設定は " window.screen.colorDepth " ビットカラー "; <br>s = " あなたの画面設定は " window.screen.deviceXDPI " ピクセル/インチです" //alert ( s); <p>} <br>getInfo(); <br></script>

IE、FireFox、Opera で動作します
document.body.clientWidth
document.body.clientHeight を取得するのは非常に簡単で便利です。
そして会社のプロジェクト間では:

Opera は引き続き

document.body.clientWidth

document.body.clientHeight

を使用します
ただし、IE と FireFox は
document.documentElement.clientWidth

document.documentElement.clientHeight

を使用します。 W3C 標準が問題を引き起こしていることが判明

このタグ行を IE でページに追加すると、

document.body.clientWidth ==> BODY オブジェクトの幅

document.body.clientHeight ==> BODY オブジェクトの高さ

document.documentElement.clientWidth ==> 表示領域の幅document.documentElement.clientHeight ==>
FireFox の場合:

document.body.clientWidth ==> BODY オブジェクトの幅
document.body.clientHeight ==> BODY オブジェクトの高さ

document.documentElement。 > 可視領域の幅

document.documentElement.clientHeight ==> 可視領域の高さ

Opera の場合:

document.body.clientWidth ==> 表示領域の幅
document.body.clientHeight ==> 表示領域の高さ

document.documentElement。 ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅)

document.documentElement.clientHeight ==>gt; ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ) W3C 標準として定義されていない場合、

IE は次のとおりです:

document.documentElement.clientWidth ==> 0
documentElement.clientHeight ==> 0

FireFox は:
document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅を足したもの) document.documentElement.clientHeight ==> (つまり、BODY オブジェクトの高さに Margin の高さを加えたもの)

オペラは次のとおりです:
document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅を足したもの) document.documentElement.clientHeight ==> (つまり、BODY オブジェクトの高さに Margin の高さを加えたもの)