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>Preview Links
Custom JS
Enable custom code in preview or view on published site.
Enable custom code?
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>