原生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; //瀏覽器距離Topwindow.screenLeft; //瀏覽器距離Leftwindow.screen.height; //屏幕分辨率的高window.screen.width; //屏幕分辨率的寬window.screen.availHeight; //屏幕可用工作區的高window.screen.availWidth; //屏幕可用工作區的寬

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

?

PC端?

按屏幕寬度大小排序（主流的用橙色標明）分辨率 比例 | 設備尺寸1024*500 （8.9寸）1024*768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ）1280*800（16：10 |15.4寸）1280*1024(比例：5：4 | 14.1寸、15.0寸)1280*854(比例：15：10 | 15.2）1366*768 (比例：16：9 | 不常見）1440*900 （16：10 17寸 僅蘋果用）1440*1050（比例：5：4 | 14.1寸、15.0寸）1600*1024（14：9 不常見）1600*1200 （4：3 | 15、16.1）1680*1050（16：10 | 15.4寸、20.0寸）1920*1200 (23寸）

通過上面的電腦屏蔽及尺寸的例表上我們得到了幾個寬度 1024 1280 1366 1440 1680 1920 PC端響應式媒體斷點

@media (min-width: 1024px){body{font-size: 18px} /*>=1024的設備*/} @media (min-width: 1100px) {body{font-size: 20px} /*>=1100的設備*/} @media (min-width: 1280px) {body{font-size: 22px;} /*>=1280的設備*/} @media (min-width: 1366px) {body{font-size: 24px;}} @media (min-width: 1440px) {body{font-size: 25px;}} @media (min-width: 1680px) {body{font-size: 28px;}} @media (min-width: 1920px) {body{font-size: 33px;}}

?

總結

以上是生活随笔為你收集整理的获取浏览器和屏幕各种高度宽度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。