Detecting Screen Size on the Fly with jsMediaQuery in JavaScript

Written by

administrator

in

Responsive web design has become an essential part of modern application development. Websites and applications are expected to provide a seamless experience across desktops, tablets, and mobile devices. While CSS media queries are the foundation of responsive design, there are situations where JavaScript needs to detect screen sizes dynamically and respond accordingly.

This is where jsMediaQuery comes into play. It provides a simple and reusable way to detect breakpoints directly within JavaScript, allowing developers to build more dynamic and adaptive applications.

Why Use jsMediaQuery?

CSS media queries are excellent for controlling layouts, but some scenarios require JavaScript-based screen detection.

Dynamic Content Rendering

Applications may need to load or modify content based on the viewport size without requiring a page refresh.

Examples include:

  • Displaying different components on mobile and desktop.
  • Switching navigation styles dynamically.
  • Loading optimized images and assets.

Triggering Responsive Animations

Certain animations or interactions depend on screen dimensions and cannot be controlled purely with CSS.

Examples:

  • Different animation timings for mobile devices.
  • Sidebar transitions for desktop screens.
  • Conditional UI effects based on viewport width.

Optimized Resource Loading

By detecting screen sizes with JavaScript, applications can load lighter resources for smaller devices, improving performance and reducing bandwidth consumption.

Examples:

  • Loading smaller images for mobile users.
  • Fetching fewer records for compact layouts.
  • Disabling unnecessary features on smaller screens.

Interactive Components

Many UI components require JavaScript intervention and need awareness of the current breakpoint.

Examples:

  • Responsive sliders.
  • Conditional modals.
  • Dynamic menus.
  • Dashboard widgets.

Getting Started

Install the package using npm:

npm install @skriptx2/jsmediaquery

Importing the Library

import { MediaQuery } from "@skriptx2/jsmediaquery";

Detecting Breakpoints

Small Devices

Returns true when the viewport width is between 577px and 767px.

MediaQuery.sm();

Example:

if (MediaQuery.sm()) {
    console.log("Small device detected");
}

Getting the Current Breakpoint

The get() method returns the active breakpoint.

MediaQuery.get();

Example:

console.log(MediaQuery.get());

Output:

{
    breakpoint: "md",
    width: 820
}

Practical Example

import { MediaQuery } from "@skriptx2/jsmediaquery";

if (MediaQuery.sm()) {
    document.body.classList.add("mobile-layout");
}

This enables developers to apply custom behavior depending on the detected screen size.

Common Use Cases

Responsive Navigation

if (MediaQuery.sm()) {
    showHamburgerMenu();
} else {
    showDesktopNavigation();
}

Loading Optimized Images

if (MediaQuery.sm()) {
    image.src = "/images/mobile-banner.webp";
} else {
    image.src = "/images/desktop-banner.webp";
}

Conditional Components

if (MediaQuery.sm()) {
    renderMobileCards();
} else {
    renderDesktopTable();
}

Benefits of jsMediaQuery

  • Lightweight and easy to use.
  • Reduces repetitive media query logic.
  • Provides cleaner and more maintainable code.
  • Enhances dynamic responsiveness.
  • Improves performance by enabling optimized resource loading.
  • Ideal for modern JavaScript frameworks and applications.

Conclusion

Responsive design goes beyond CSS. Modern applications often require dynamic behavior based on screen size, and jsMediaQuery provides a clean and efficient way to achieve that. Whether you’re building dashboards, e-commerce platforms, or interactive web applications, jsMediaQuery helps you detect breakpoints on the fly and create experiences that adapt seamlessly across all devices.

Start integrating jsMediaQuery into your projects and simplify responsive JavaScript development.

More posts