1. 程式人生 > >js/jq獲取瀏覽器寬高

js/jq獲取瀏覽器寬高

由於移動端和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