屏幕尺寸
屏幕尺寸分析
<!DOCTYPE html> <script src="js/jquery-1.11.3.js" type="text/javascript"></script> <html> <head><title>aaa</title><style>body{margin:10px;padding:10px;border:10px solid #000;}</style> </head><body><h1>hsjjadsajdjahsjdadhksahjfdgjfgjafjasjgakuiajkshkabcbakahkjhsjdhwihkadhiahdksahdkahkshkdshkhdjshdjsdjshjhakdhakhdjsdjksashk</h1><div>hsjjadsajdjahsjdadhksahjfdgjfgjafjasjgakuiajkshkabcbakahkjhsjdhwihkadhiahdksahdkahkshkdshkhdjshdjsdjshjhakdhakhdjsdjksashkhsjjadsajdjahsjdadhksahjfdgjfgjafjasjgakuiajkshkabcbakahkjhsjdhwihkadhiahdksahdkahkshkdshkhdjshdjsdjshjhakdhakhdjsdjksashkhsjjadsajdjahsjdadhksahjfdgjfgjafjasjgakuiajkshkabcbakahkjhsjdhwihkadhiahdksahdkahkshkdshkhdjshdjsdjshjhakdhakhdjsdjksashk</div><p>Welcome to aaa</p><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1><h1>aaa</h1></body> </html> <script type="text/javascript">document.write("window.innerWidth: "+window.innerWidth+"\n");document.write("window.outerWidth: "+window.outerWidth+"\n");document.write("window.screen.width: "+window.screen.width+"\n");document.write("window.screen.availWidth: "+window.screen.availWidth+"\n");document.write("document.body.clientWidth: "+document.body.clientWidth+"\n");document.write("document.body.offsetWidth: "+document.body.offsetWidth+"\n");document.write("document.body.scrollWidth: "+document.body.scrollWidth+"\n");document.write("$(window).width(): "+$(window).width()+"\n");document.write("$(document.body).width(): "+$(document.body).width()+"\n");document.write("$(document).width(): "+$(document).width()+"\n");document.write("window.innerHeight: "+window.innerHeight+"\n");document.write("window.outerHeight: "+window.outerHeight+"\n");document.write("window.screen.height: "+window.screen.height+"\n");document.write("window.screen.availHeight: "+window.screen.availHeight+"\n");document.write("document.body.clientHeight: "+document.body.clientHeight+"\n");document.write("document.body.offsetHeight: "+document.body.offsetHeight+"\n");document.write("document.body.scrollHeight: "+document.body.scrollHeight+"\n");document.write("$(window).height(): "+$(window).height()+"\n");document.write("$(document.body).height(): "+$(document.body).height()+"\n");document.write("$(document).height(): "+$(document).height()+"\n");document.write("document.body.scrollTop: "+document.body.scrollTop+"\n");document.write("document.body.scrollLeft: "+document.body.scrollLeft+"\n");document.write("window.screenTop: "+window.screenTop+"\n");document.write("window.screenLeft: "+window.screenLeft+"\n"); </script>
?
以上圖均為有滾動(dòng)條↑
width分析：
與滾動(dòng)條無(wú)關(guān)
window.screen.width ,?window.screen.availWidth , window.innerWidth , window.outerWidth 顯示屏的寬度
有滾動(dòng)條
1.無(wú)豎的滾動(dòng)條
document.body.scrollWidth 和 $(document).width() :?網(wǎng)頁(yè)正文全文寬(包括 margin,border,padding,但不包括 滾動(dòng)條)；
2.有豎的滾動(dòng)條
document.body.scrollWidth 和 $(document).width() :?網(wǎng)頁(yè)正文全文寬(包括 margin,border,padding,但包括 滾動(dòng)條,會(huì)忽略滾動(dòng)條)；
無(wú)滾動(dòng)條
document.body.scrollWidth , $(document).width() ,?window.screen.width ,?window.screen.availWidth , window.innerWidth , window.outerWidth , $(window).width() 一樣，為顯示屏的寬度；
document.body.offsetWidth : 不包括margin
document.body.clientWidth : 不包括margin和border
$(document.body).width() ：不包括padding,border和margin
?
height分析：
height太亂了，老是變化！/(ㄒoㄒ)/~~
轉(zhuǎn)載于:https://www.cnblogs.com/mina-huojian66/p/6138391.html
總結(jié)
- 上一篇： 管道泄漏监测系统分布式光纤测温技术方案
- 下一篇： 基于正点原子stm32mini板的串行通