Introduction to Window Size in Web Development

Managing window size is pivotal in web development, as it affects how content is displayed and how responsive a site is. This guide will delve into the Window Size API, covering numerous examples to enhance your understanding and application of this subject.

Basic Window Size APIs

Here, we introduce basic and essential APIs for handling window size.

1. window.innerWidth and window.innerHeight

The window.innerWidth and window.innerHeight properties return the interior width and height of the window in pixels.

  const width = window.innerWidth;
  const height = window.innerHeight;
  console.log(`Width: ${width}, Height: ${height}`);

2. window.outerWidth and window.outerHeight

The window.outerWidth and window.outerHeight properties include the browser’s chrome (window’s border and scrollbar).

  const outerWidth = window.outerWidth;
  const outerHeight = window.outerHeight;
  console.log(`Outer Width: ${outerWidth}, Outer Height: ${outerHeight}`);

3. window.onresize Event

Attach an event listener for the resize event to detect when the window is resized.

  window.onresize = () => {
    console.log("Window resized");
  };

4. window.matchMedia

The window.matchMedia() method checks for media queries and manages responsive design efficiently.

  const mediaQuery = window.matchMedia("(max-width: 600px)");
  mediaQuery.addEventListener("change", () => {
    console.log(mediaQuery.matches ? "Screen width is 600px or less" : "Screen width is more than 600px");
  });

5. screen.width and screen.height

The screen.width and screen.height properties return the screen’s width and height in pixels, inclusive of taskbars or operating system interface areas.

  const screenWidth = screen.width;
  const screenHeight = screen.height;
  console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);

Creating a Responsive Web App Using Window Size APIs

Let’s build a simple responsive web app utilizing these window size APIs. We’ll create a layout that changes the background color based on the window’s width.

  
  
  
    
    
  
  
    
Hello, World!
    
  
  

This example showcases how to dynamically modify the page's designs based on the window size. Resize the browser to see the background color change!

Hash: 5637e1579501643badb85b016696ca77c76805009ab805b0d5326c9b2ccf9872