How to get the browser viewport size

Question

I want my visitors to be able to see high quality images, is there any way to detect the window size?

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

Answer 1

jQuery Dimension Function

$(window).width() and $(window).height()

Answer 2

Cross-browser @media(width)< /code> and @media(height) value

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

window.innerWidth and window.innerHeight

• GetCSS viewport @media(width)< /code> and @media (height) which includes scrollbars
• initial-scale and scaling changes may cause movement errors to scale down to a value where the PPK calls the visual viewport and is smaller than @mediavalue
• Due to native rounding, scaling may cause values ​​to shrink by 1 pixel
• Undefined in IE8-

document.documentElement .clientWidth and .clientHeight

• Equal to CSS viewport widthminusScroll bar width
• When does not have a scroll bar, match @media (width) and @media (height)
• Same jQuery(window).width() jQuery Call Browser viewport
• Available cross-browser
• Inaccurate if document type is missing

---

resource

• Real-time output in various dimensions
• verge Using cross-browser viewport technology
• actualUse matchMedia to get exact dimensions in any unit