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 |
網頁設計.RWD響應式網站.企業形象網站 / 電子科技類
網站技術:PHP . Javascript/MySql
RWD響應式網頁設計,同時可以使用在PC、平板、手機的網頁設計+程式設計。
精選專案.網頁設計.RWD響應式網站 / 戶外旅遊類
網站技術:PHP . Javascript/MS-SQL
不論是個人、情侶、好友或是家庭想要安排一場獨一無二的旅遊!!趣吧有滿滿的夢幻行程可以滿足,機票、包車、住宿、票劵一次搞定;想要出國怕語言不通,也有專業達人協助。 讓你擁有一場難忘又滿足的旅遊。
精選專案.網頁設計.RWD響應式網站.企業形象網站 / 電子科技類
網站技術:PHP . Javascript/MySql
均豪專精於半導體、顯示器設備設計及製造,對於在社會回饋上也是相當重視,更體現了其對ESG和SDGs概念的關注,透過官網表達均豪對ESG永續發展的立場與積極的態度。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策