javascriptcross-browserviewport

How to get the browser viewport dimensions?


I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size?

Or better yet, the viewport size of the browser with JavaScript? See green area here:


Solution

  • Cross-browser @media (width) and @media (height) values 

    let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
    let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
    

    window.innerWidth and window.innerHeight

    document.documentElement.clientWidth and .clientHeight


    Resources