JavaScript matchMedia

Utility
Responsive
JS
  • Run JavaScript based on screen size on page load and when crossing between breakpoints
<script>
document.addEventListener("DOMContentLoaded", () => {
	function checkBreakpoint(x) {
		if (x.matches) {
			// desktop code here
		} else {
			// tablet & below code here
		}
	}
	const matchMediaDesktop = window.matchMedia("(min-width: 992px)");
	checkBreakpoint(matchMediaDesktop);
	matchMediaDesktop.addListener(checkBreakpoint);
});
</script>
Last Updated: Dec 3, 2025
  • Run JavaScript based on screen size on page load and when crossing between breakpoints
<script>
document.addEventListener("DOMContentLoaded", () => {
	function checkBreakpoint(x) {
		if (x.matches) {
			// desktop code here
		} else {
			// tablet & below code here
		}
	}
	const matchMediaDesktop = window.matchMedia("(min-width: 992px)");
	checkBreakpoint(matchMediaDesktop);
	matchMediaDesktop.addListener(checkBreakpoint);
});
</script>