This is a one page scrolling site for kids. The content is best viewed at 1200 pixels wide. Is there a way I can make the window default to that size when the site is visited?

This is a one page scrolling site for kids. The content is best viewed at 1200 pixels wide. Is there a way I can make the window default to that size when the site is visited?

• javascript
• html
• css

• If you use a script on another page to open it up as a popup, you can set the size of the new window. I don't think a page can change the size of its own window. – Barmar Commented Apr 9, 2015 at 16:47
• Use the options argument to window.open() to set the window size. – Barmar Commented Apr 9, 2015 at 16:48
• Can you provide more explanation? Do you want to set a wrapper with attributes width:1200px or max-width:1200px? Or you want to use window.open()? – Nereo Costacurta Commented Apr 9, 2015 at 16:48

3 Answers 3

No, but you can have a landing page with a button on it that opens your desired page using window.open, and you can tell window.open how big you want the window it opens to be.

Details here, but basically (inside a click handler or similar):

window.open("http://example.", "width=1200");

This is a suggestion to the browser, which it can ignore if it likes, but a value in that range is likely to be fine. (Whereas browsers tend to disallow very small windows.) You can also specify height, whether it has various window features, etc.

Of course, if you can make the page work well in any width, that would be better. Some of us are positively irritated by sites that try to tell us how wide our browser windows should be. :-)

You can open a new window of specific size on a click of a link/button using window.open like :

<a href="some url"
   onclick="window.open(this.href,'targetWindow',
                                   'width=700px,
                                    height=700px');
 return false;">Popup link</a>

There are two ways you can do this:

1. Using a div, iframe, or other element to contain everything on your page and specify the size on it. This won't change the actual size of the browser window.
2. Open a new window (popup) and specify a size on that. Note that if it's not done as part of the user clicking on something, it will likely be blocked by the browser's popup blocker. More info can be found here

Both of those are ignoring any issues with trying to force a size on the user. Things like:

• What if their screen isn't large enough?
• Will this be annoying to my users?
• What if my user resizes the window?
• Will all browsers support the resizing I'm after?
• Will trying to resize cause horizontal scroll bars?

In general you should aim for something that can work across multiple sizes, but have a more reasonable minimum size. 1024x768 is usually a good resolution to aim for. This will much around with mobile browsers, but I presume you're not worried about those.