window.resizeTo(): Resize a Window to a Fixed Width and Height
window.resizeTo() requests a fixed outer width and height for a browser window. The dimensions include browser window chrome such as borders/title bars where applicable, not just the document viewport.
window.resizeTo(width, height);
The original example opens a 250 × 150 child window and then requests an outer size of 300 × 300 pixels.
Resize the opened child window Top ↑
The original Open, Close and Resize To controls are preserved.
Complete source Top ↑
The complete working page is shown in one block so users can copy it directly.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo of resizeTo() on a child window</title>
</head>
<body>
<button type="button" id="openBtn">Open</button>
<button type="button" id="closeBtn">Close</button>
<button type="button" id="resizeBtn">Resize To</button>
<p id="demoStatus" aria-live="polite"></p>
<script>
let tm = null;
function showStatus(message) {
document.getElementById("demoStatus").textContent = message;
}
function to_open() {
tm = window.open(
"moveby-child.htm",
"Ratting",
"width=250,height=150,left=150,top=200,status=0,resizable=yes"
);
showStatus(tm ? "Child window opened." : "Popup blocked. Allow popups and try again.");
}
function to_close() {
if (tm && !tm.closed) tm.close();
else showStatus("Open the child window first.");
}
function to_resizeTo() {
if (!tm || tm.closed) {
showStatus("Open the child window first.");
return;
}
tm.resizeTo(300, 300);
tm.focus();
showStatus("Requested outer size: 300 × 300 pixels.");
}
document.getElementById("openBtn").addEventListener("click", to_open);
document.getElementById("closeBtn").addEventListener("click", to_close);
document.getElementById("resizeBtn").addEventListener("click", to_resizeTo);
</script>
</body>
</html>
The child page is shared with the moveBy() example.
Browser restrictions and responsive design Top ↑
resizeTo() is intended for windows created by window.open(), and a browser or operating system can still ignore the request. The demo opens the child window with resizable=yes for compatibility.resizeTo() is not a responsive-design technique. Use CSS media queries, flexible layouts, and responsive components to adapt page content to different viewport sizes.
Window Object When a window loses focus: Blur Redirect Page
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
