Screen Resolution Detector

Table of contents

• General info
• Technologies
• Demo
• Articles

General info

Screen resolution is the number of pixels your monitor have in horizontal and vertical dimensions.

Technologies

• HTML5
• CSS3
• JavaScript (ES6+)

Demo

• click here

Articles

• How to detect when the window size is resized using JavaScript?
• MDN: Window: resize event
• MDN: Viewport concepts
• Window sizes and scrolling
• Difference between offsetHeight, clientHeight and scrollHeight
• What is offsetHeight, clientHeight, scrollHeight?
• Difference between offsetHeight and clientHeight
• MDN: Resize Observer API
• ResizeObserver: it’s like document.onresize for elements
• ResizeObserver – a new powerful tool for Responsive Web
• The Resize Observer explained