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 |
Line OA / 服務類
透過幫痘氏皮膚科診所 LINE OA官方帳號進行線上預約、客服諮詢、預約查詢.....等等。客人針對自己的膚質挑選療程,若有任何想要諮詢的問題能利用LINE 官方網站的聊天室。
精選專案.網頁設計.RWD響應式網站.企業形象網站 / 教育人文類
網站技術:PHP . Javascript/MySql
A+ Teacher擁有國外前百大公私立大學的優良師資,線上面對面的教學方式,讓你可以實際和外籍教師互動,保證讓你愛上開口說英文。A+ Teacher有兩大特色,分別是立即上課與預約上課。
網頁設計.RWD響應式網站.企業形象網站 / 電子科技類
網站技術:PHP . Javascript/MySql
展達為群光集團子公司,並提供互連網、AI人工智慧及多媒體等多種通信網絡相關服務。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策