JavaScript Window resizeBy() Method

What You’ll Learn

The resizeBy() method changes a browser window’s size by a relative pixel amount. This tutorial covers syntax, positive and negative deltas, how it differs from resizeTo(), popup usage, browser restrictions, five examples, and when not to use it.

Introduction

Every browser window has a width and height. The window.resizeBy() method grows or shrinks that window by a number of pixels—without you needing to calculate the final size. Pass 200 for width to add 200 pixels; pass -50 for height to remove 50 pixels.

Like moveBy() and moveTo(), resize APIs are limited on tabs the user opened themselves. Browsers prevent sites from resizing the user’s main window unexpectedly. Test with popups created via window.open(), especially when the user clicks a button to trigger the resize.

Understanding the resizeBy() Method

window.resizeBy(deltaWidth, deltaHeight) adds deltaWidth to the window’s current outer width and deltaHeight to its outer height. Both arguments are numbers (pixels). The method returns undefined.

Important: the arguments are deltas, not target sizes. resizeBy(100, 50) means “grow by 100×50 pixels,” not “set width to 100.” To set an exact size, use resizeTo() instead.

📝 Syntax

General form of Window.resizeBy():

window.resizeBy(deltaWidth, deltaHeight);
// resize a popup reference:
popupWindow.resizeBy(50, 30);

Parameters

• deltaWidth — pixels to add to width. Positive grows wider; negative shrinks.
• deltaHeight — pixels to add to height. Positive grows taller; negative shrinks.

Return value

• undefined.

Related APIs

• window.resizeTo(width, height) — set absolute outer dimensions.
• window.innerWidth / window.innerHeight — viewport size (content area).
• window.outerWidth / window.outerHeight — full window including chrome.
• window.open() — create a popup you may resize.
• window.moveBy() — change position by a relative delta (also restricted).

Examples Gallery

Use the Try-it links to adjust window size from button clicks. Popups opened with window.open() are the most reliable way to see resizeBy() work.

window.resizeBy(200, 100);
console.log("resizeBy(200, 100) called — may be blocked on main tabs.");

resizeBy(200, 100) called — may be blocked on main tabs.

function resizeWindow() {
  window.resizeBy(100, 50);
  console.log("Window grown by (100, 50).");
}

document.getElementById("resizeBtn").addEventListener("click", resizeWindow);

Window grown by (100, 50).

let popupWindow = null;

document.getElementById("openBtn").onclick = function () {
  popupWindow = window.open("", "ResizeDemo", "width=320,height=200,left=200,top=120");
  popupWindow.document.write("<p>I am a resizable popup</p>");
};

document.getElementById("resizePopupBtn").onclick = function () {
  if (popupWindow && !popupWindow.closed) {
    popupWindow.resizeBy(60, 40);
    console.log("Popup resized by (60, 40).");
  }
};

Popup resized by (60, 40).

window.resizeBy(-80, -40);
console.log("Window shrunk by (80, 40) if allowed.");

Window shrunk by (80, 40) if allowed.

const before = `${window.innerWidth}×${window.innerHeight}`;
window.resizeBy(50, 30);
const after = `${window.innerWidth}×${window.innerHeight}`;

console.log(`Before: ${before}`);
console.log(`After:  ${after}`);

Before: 1024×768
After:  1074×798
(values depend on your window; unchanged if resize blocked)

🚀 Common Use Cases

• Helper popups — expand a tool palette after the user opens it.
• Step controls — Grow / Shrink buttons that call small resizeBy deltas.
• Legacy desktop-style apps — floating windows built with window.open().
• Preview windows — slightly enlarge a popup when showing extra detail.
• Learning demos — teaching window APIs alongside moveBy and open.
• Internal admin tools — controlled environments where popups are expected.

📝 Notes

• Do not pass innerWidth as the first argument—that is a common mistake. Pass the change, e.g. resizeBy(100, 0).
• Do not auto-resize windows on page load—it frustrates users and is usually blocked.
• Maximized and fullscreen windows may ignore resize requests.
• Mobile browsers often lack traditional resizable windows; popups may open as tabs.
• resizeBy affects the outer browser window—not individual elements (use CSS for those).
• Pair with window.open() features string width and height for initial popup size.

💡 Best Practices