JavaScript Window resizeTo() Method

What You’ll Learn

The resizeTo() method sets a browser window to exact outer width and height in pixels. This tutorial covers syntax, how it differs from resizeBy(), pairing with window.open(), popup usage, browser restrictions, five examples, and when not to use it.

Introduction

Sometimes you need a window at a specific size—a compact tool palette, a fixed preview pane, or a popup dialog with predictable dimensions. The window.resizeTo() method sets the outer width and height of the current window to exact pixel values.

Like resizeBy(), moveTo(), and moveBy(), 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 resizeTo() Method

window.resizeTo(width, height) takes two numbers and returns undefined. The browser attempts to set the window’s outer width and height—the full window frame including chrome—to those values.

The viewport (the page area) is smaller than the outer size because of toolbars and borders. Read innerWidth / innerHeight for content area dimensions and outerWidth / outerHeight for the full window frame.

📝 Syntax

General form of Window.resizeTo():

window.resizeTo(width, height);
// resize a popup reference:
popupWindow.resizeTo(640, 480);

Parameters

• width — target outer width in pixels.
• height — target outer height in pixels.

Return value

• undefined.

Related APIs

• window.resizeBy(dw, dh) — change size by a relative delta.
• window.open(url, name, "width=640,height=480") — set initial popup size at open time.
• window.outerWidth / outerHeight — full window frame size.
• window.innerWidth / innerHeight — viewport (content area) size.
• window.moveTo(x, y) — set absolute position (also restricted).

Examples Gallery

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

window.resizeTo(800, 600);
console.log("resizeTo(800, 600) called — may be blocked on main tabs.");

resizeTo(800, 600) called — may be blocked on main tabs.

document.getElementById("compactBtn").addEventListener("click", function () {
  window.resizeTo(480, 360);
  console.log("Compact size: 480×360");
});

document.getElementById("largeBtn").addEventListener("click", function () {
  window.resizeTo(1024, 768);
  console.log("Large size: 1024×768");
});

Compact size: 480×360
(or)
Large size: 1024×768

let popupWindow = null;

document.getElementById("openBtn").onclick = function () {
  popupWindow = window.open("", "SizeDemo", "width=320,height=200,left=200,top=120");
  popupWindow.document.write("<p>Resize me from the opener</p>");
};

document.getElementById("resizePopupBtn").onclick = function () {
  if (popupWindow && !popupWindow.closed) {
    popupWindow.resizeTo(500, 400);
    console.log("Popup set to 500×400.");
  }
};

Popup set to 500×400.

const popup = window.open(
  "https://example.com",
  "ExamplePopup",
  "width=600,height=400,scrollbars=yes"
);

// Later, if still open:
if (popup && !popup.closed) {
  popup.resizeTo(800, 600);
}

Popup opens at 600×400, then expands to 800×600 if resize is allowed.

window.resizeTo(640, 480);

console.log(`Outer: ${window.outerWidth}×${window.outerHeight}`);
console.log(`Inner: ${window.innerWidth}×${window.innerHeight}`);

Outer: 640×480
Inner: 624×412
(inner values vary by browser chrome; unchanged if resize blocked)

🚀 Common Use Cases

• Popup dialogs — fixed-size helper windows for tools or wizards.
• Preview panes — expand a popup when showing detailed content.
• Preset layouts — Compact / Standard / Large buttons for script-opened windows.
• Legacy desktop-style apps — floating palettes with known dimensions.
• Post-open adjustment — resize after window.open() when content needs more room.
• Learning demos — teaching window APIs alongside resizeBy and moveTo.

📝 Notes

• resizeTo sets outer size, not viewport (innerWidth) directly.
• Do not auto-resize on page load or on every resize event—it frustrates users and is usually blocked.
• Checking if (window.resizeTo) is not useful—the method exists everywhere; policy decides if it works.
• Maximized and fullscreen windows may ignore resize requests.
• Mobile browsers often lack resizable windows; popups may open as tabs.
• For in-page layout, use CSS media queries and flexible grids—not resizeTo().

💡 Best Practices