js/jq獲取瀏覽器寬高
阿新 • • 發佈:2019-01-10
由於移動端和PC端頁面大小不一樣,需要適應移動端,要在head新增
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
Javascript:
alert(document.body.clientWidth); //網頁可見區域寬(body)
alert(document.body.clientHeight); //網頁可見區域高(body)
alert(document.body.offsetWidth) ; //網頁可見區域寬(body),包括border、margin等
alert(document.body.offsetHeight); //網頁可見區域寬(body),包括border、margin等
alert(document.body.scrollWidth); //網頁正文全文寬,包括有滾動條時的未見區域
alert(document.body.scrollHeight); //網頁正文全文高,包括有滾動條時的未見區域
alert(document.body.scrollTop); //網頁被捲去的Top(滾動條)
alert(document.body.scrollLeft) ; //網頁被捲去的Left(滾動條)
alert(window.screenTop); //瀏覽器距離Top
alert(window.screenLeft); //瀏覽器距離Left
alert(window.screen.height); //螢幕解析度的高
alert(window.screen.width); //螢幕解析度的寬
alert(window.screen.availHeight); //螢幕可用工作區的高
alert(window.screen.availWidth) ; //螢幕可用工作區的寬
Jquery
alert($(window).height()); //瀏覽器當前視窗可視區域高度
alert($(document).height()); //瀏覽器當前視窗文件的高度
alert($(document.body).height()); //瀏覽器當前視窗文件body的高度
alert($(document.body).outerHeight(true)); //瀏覽器當前視窗文件body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當前視窗可視區域寬度
alert($(document).width()); //瀏覽器當前視窗文件物件寬度
alert($(document.body).width()); //瀏覽器當前視窗文件body的寬度
alert($(document.body).outerWidth(true)); //瀏覽器當前視窗文件body的總寬度 包括border padding margin