獲取瀏覽器窗口信息
- 頁面視口大小，（只跟瀏覽器窗口有關(guān)轻绞，不包括工具欄和滾動條）
注：隨著窗口的大小而變化弛矛，保存頁面視口的信息
// chrome
var w = document.documentElement.clientWidth
var h = document.documentElement.clientHeight
// 兼容式寫法
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight
if(typeof pageWidth != 'number') {
if (document.compatMode == 'CSS1Compat') {
// 標(biāo)準(zhǔn)模式下
pageWidth = document.documentElement.clientWidth
pageHeight = document.documentElement.clientHeight
} else {
pageWidth = document.body.clientWidth
pageHeight = document.body.clientHeight
}
}
視口大小
- 瀏覽器窗口本身的尺寸（包括導(dǎo)航欄跺嗽、書簽欄等）
注：和頁面大小無關(guān)郭卫，只和瀏覽器窗口大小
var w = window.outerWidth
var h = window.outerHeight
瀏覽器窗口.jpg
- 頁面的寬度和高度（與瀏覽器的頁面有關(guān)）
注：這個(gè)高度全屏情況下為視口狀態(tài)下的高度砍聊，非全屏狀態(tài)下是整個(gè)頁面的長度（包括滾動的長度）--此處我也感覺很奇怪（尷尬）
// chrome
var w = document.body.clientWidth
var h = document.body.clientHeight
- 頁面滾動區(qū)域的寬度、高度
var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
- 電腦屏幕寬度高度（不關(guān)瀏覽器贰军、頂部工具欄辩恼、底部工具欄）
var w = window.screen.width
var h = window.screen.height
- 電腦屏幕可用寬度和高度（電腦屏幕-頂部工具欄-底部工具欄）
var w = window.screen.availWidth
var h = window.screen.availHeight
- 瀏覽器窗口相對于屏幕的位置
var w = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX
var h = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY
瀏覽器窗口相對于屏幕的位置
感謝您的view，留個(gè)贊再走唄
- 感謝瀏覽姑娘的文章谓形，來自一個(gè)寫前端的姑娘！
