JSはどのようにスクリーン、ブラウザーとウェブページの高さの幅を取得しますか?

目的
ブラウザでは、JSで取得する高さと幅はそれぞれ3種類あり、画面、ブラウザ、ウェブページのそれぞれが含まれています.様々な計算定位問題を解決します.それでいろいろ覚えられません.随筆を書いて調べやすいです.
スクリーンの幅の高さ
説明:名前の通り、画面の幅の高さはディスプレイの解像度を指します.システム分解能はこの幅の高さを変えることができる.
取得方法:

console.log('  ：', window.screen.width)
console.log('  ：', window.screen.height)

ブラウザの使用可能なエリアの幅の高さ
説明:ブラウザの幅の高さとは、ブラウザウィンドウが最大化された時の幅の高さを指します.通常の最大化後は、システムのタスクバーの高さを取り除くのが一般的です.幅はスクリーンの幅と同じです.この幅の高さはタスクバーの占有空間が変化すると変化します.
取得方法:

console.log('  ：', window.screen.availWidth)
console.log('  ：', window.screen.availHeight)

ホームページの幅
説明:ページの幅の高さとは、ページの幅の高さを指します.ブラウザはページの内容以外の部分は計算しません.タブバー、アドレスバー、ブックマークバー、コンソールなどはすべて計算しないで広い範囲の中で、ウェブページの内容の領域だけあります.
取得方法:

console.log('  ：', window.innerWidth)
console.log('  ：', window.innerHeight)

その他(ブラウザとスクリーンの各種高さ幅を取得)
js原生方法:

document.body.clientWidth;        //       (body)

document.body.clientHeight;       //       (body)

document.body.offsetWidth;        //       (body)，  border、margin 

document.body.offsetHeight;       //       (body)，  border、margin 

document.body.scrollWidth;        //       ，            

document.body.scrollHeight;       //       ，            

document.body.scrollTop;          //      Top(   )

document.body.scrollLeft;         //      Left(   )

window.screenTop;                 //     Top

window.screenLeft;                //     Left

jQuery方法:

$(window).height();                    //             

$(document).height();                  //            

$(document.body).height();             //         body   

$(document.body).outerHeight(true);    //         body       border padding margin

$(window).width();                     //             

$(document).width();                   //             

$(document.body).width();              //         body   

$(document.body).outerWidth(true);     //         body       border padding margin

　　
 
転載先:https://www.cnblogs.com/jameBo/p/10582715.html