2017
06
20

使用JavsScript取得裝置與視窗的尺寸[轉載自ryanve]

關鍵字:deviceviewportsizeJavaScriptwindowdocumentjquerywidthheight

Viewport: How to get viewport size.

jQuery(window).width() uses document.documentElement.clientWidth and is regarded as cross-browser compatible. Directly using .clientWidth is faster and equally compatible. The tables below compare these live against the inner/outer methods to determine the most accurate method: verge wins because itnormalizes browser nuances to accurately match @media breakpoints.

width methods live output
@media breakpoint  1920
verge.viewportW()  1920
$(window).width() 1903
document.documentElement.clientWidth 1903
window.innerWidth 1920
window.outerWidth 1920

 

height methods live output
@media breakpoint 989
verge.viewportH() 989
$(window).height() 989
document.documentElement.clientHeight 989
window.innerHeight 989
window.outerHeight 1050

 

Device: How to get device size.

Use window.screen.width for device width and window.screen.height for device height..availWidth and .availHeight give you the device size minus UI taskbars. (Try on an iPhone.) Device size is static and does not change when the page is resized or rotated.

width methods live output
@media breakpoint 1920
window.screen.width 1920
window.screen.availWidth 1920

 

height methods live output
@media breakpoint 1080
window.screen.height 1080
window.screen.availHeight 1050

 

Document: How to get document size.

Document size methods are often needed in scrolling apps. Note the difference between jQuery(document).width() and the native properties (especially when the window is wider than the max-width of the body). jQuery uses the Math.max of 5 numbers to calculate this. For decent cross-browser support, the Math.max of the 3 document.documentElement properties seems to suffice.

width methods live output
$(document).width() 1903
document.body.clientWidth 1080
document.body.offsetWidth 1080
document.body.scrollWidth 1903
document.documentElement.clientWidth 1903
document.documentElement.offsetWidth 1903
document.documentElement.scrollWidth 1903

 

height methods live output
$(document).height() 2401
document.body.clientHeight 2365
document.body.offsetHeight 2365
document.body.scrollHeight 2401
document.documentElement.clientHeight 989
document.documentElement.offsetHeight 2401
document.documentElement.scrollHeight 2401
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.