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
提供健保門診及醫學美容的專業服務,並擅於治療常見皮膚疾病,如皮秒除斑、除刺青、黑眼圈、電音波、體雕與多汗症等症狀。
網頁設計.企業形象網站 / 服務類
網站技術:PHP . Javascript
服務對象主要是台中當地不動產事務所,與各事務所建立互助的關係。公會不定期舉辦教育訓練/座談會、提供相關資料使用。加入會員可以觀看自己的報名紀錄與時數相關資料。
精選專案.網頁設計.RWD響應式網站.行動版網站 / 服務類
網站技術:PHP . Javascript/MySql
提供韓國空運及海運的代購運輸服務,並擁有高效可靠的倉儲管理系統,為客戶打造快速便捷的服務。對於需要韓國商品的族群提供國際運輸服務,透過高效率的代購服務流程將商品快速送到客戶手上。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策