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響應式網站.企業形象網站 / 環保類
網站技術:PHP . Javascript
各國提倡環境保護,從環境整潔、保護物種甚至是居住環境,本站致力於導入再生能源與綠建築。利用太陽能板、風力...等等增加更多能源。對於建築物來說題昌綠建築標章, 在選購家電上要挑選一級省電的標章也為環境出力。
網頁設計.RWD響應式網站.行動版網站 / 美容保養類
網站技術:PHP . Javascript/MySql
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策