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

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

WBOY

リリース： 2016-05-16 17:03:55

オリジナル

1277 人が閲覧しました

一般的に使用される:
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> function getInfo() { var s = ""; s = "Web ページの表示領域の幅:" document.body.clientWidth; s = "表示領域の高さWeb ページの幅:" document.body.clientHeight; s = "Web ページの表示領域の幅:" 領域の幅: " document.body.offsetWidth " (エッジとスクロールバー)"; s = "Web ページの表示領域の高さ: " document.body.offsetHeight " (エッジの幅を含む)"; s = "フルWeb ページ本文のテキストの幅:" document.body.scrollWidth; s = "Web ページ本文の全テキストの高さ:" document.body.scrollHeight; s = "Web のスクロールされた高さpage (ff):" document.body.scrollTop; s = "Web ページがスクロールされる高さ(ie):" document.documentElement.scrollTop; s = "Web ページがスクロールされる左側スクロールされています:" document.body.scrollLeft; s = "Web ページのテキストの上部:" window.screenTop; s = "Web ページのテキスト部分の左側:" window.screenLeft; s = "画面解像度の高さ:" window.screen.height; s = "画面解像度の幅:" window.screen.width; s = "使用可能な画面の作業領域の高さ:" window .screen.availHeight; s = "画面の使用可能な作業領域の幅:" " window.screen.availWidth; s = "あなたの画面設定は " window.screen.colorDepth " ビットカラー "; s = " あなたの画面設定は " window.screen.deviceXDPI " ピクセル/インチです" //alert ( s); } getInfo(); </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 の高さを加えたもの)