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響應式網站 / 服務類
網站技術:Javascript
協助民眾了解與申請商標的相關流程與資訊,讓客戶加深專利商標這方面的訊息,以過往的案件來加深大眾對於商標的重要性。甚至可以為不同類型客戶量身打造品牌策略服務、分析對手情況...等等服務。
網頁設計.RWD響應式網站.活動網站 / 服務類
網站技術:PHP . Javascript/MySql
世展發起募捐計畫,利用募捐的錢來幫助貧困教育、生活甚至是疾病,可以減輕家中的負擔。
線上捐款辦法也非常容易,點選右下角"我要送出紅包">>勾選要送出的紅包類型>>完成付款就可以喔。
精選專案.網頁設計.RWD響應式網站.行動版網站.企業形象網站 / 電子工業類
網站技術:PHP . Javascript/MySql
全台唯一自有工廠及正式品牌授權 (Samsung、Walsin、PDC、Kamaya)的被動元件代理製造商與經銷商,在半導體供應鏈站有一席之地。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策