WWW FAQs: How do I maximize the browser window in JavaScript?


2006-11-13: It is possible to maximize the browser window (make it fill the screen) with JavaScript code. However, bear in mind that some browsers block such requests, and others (notably Firefox 2.0) open new windows as new tabs instead... which means that you're maximizing all of the user's tabs. This sort of behavior is usually considered unwelcome by the user.

I should also note that maximizing the window this way isn't quite the same thing as maximizing it with the maximize button in the upper right corner of the browser. Specifically, Windows doesn't think of the window as "officially" maximized. So the user can't click the "restore" button to revert to the old size. And that annoys users too. So you should think carefully. Do you really need to force the browser to resize?

All that said, here's how to maximize the window!


<html>
<head>
<title>Maximize Your Potential</title>
<script>
function maximize() {
  window.moveTo(0, 0);
  window.resizeTo(screen.width, screen.height);
}
maximize();
</script>
</head>
<body>
<h1 align="center">Maximize Your Potential</h1>
This page is self-maximizing.
</body>
</html>

But how does it work? Let's break it down a bit:

1. The <script> element contains a function called maximize.

2. This function contains two lines of JavaScript code. The first line:


window.moveTo(0, 0);

Moves the window to the upper left corner of the screen. The built-in window.moveTo function accomplishes this. Coordinates on the screen are counted from left to right and from top to bottom, and the horizontal coordinate is given first.

3. The second line is a bit more interesting:


window.resizeTo(screen.width, screen.height);

screen.width and screen.height are built-in properties of the browser's screen object, which tell us how wide and tall the screen is. By calling the built-in function window.resizeTo with these values, we resize the browser to fill the screen.

4. The final task is to actually resize the browser window by calling maximize. Here we do that right after we define the maximize function, but you could do it in response to a click on a link by calling it from an onClick handler. Or you could do it in response to some other event. The choice is yours.

Again, bear in mind that in most cases forcing the browser window to resize only aggravates the user. Be very sure your situation truly requires it. Sometimes it's wiser to design a less "busy" page that doesn't require a maximized browser window. After all, screens vary in size— users with high-end 25-inch LCD monitors will not thank you for filling them.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!