Jump to content

window.open set width?


Recommended Posts

A button in my window opens a new, narrow window centered on the screen.

  window.open("/myWindow.html", "_blank", width="400", height=screen.height, top=0, left=(screen.width / 2 - 200));

My naive assumption was that, on a large screen (laptop or larger), this would create a window 400px wide. On my 13" macbook, according to the information in the Safari web inspector, it creates a window only 347.826px wide.

The CSS of the new window sets a background, then creates a <div class="shell">, 300px wide. The setting of margin:0 auto is meant to center the "shell" in the new window.

body {
	background-color:#C03;
	background-image:url(../images/Curtain%20narrow.jpg); 
	overflow-x:hidden;	
}
div.shell {
	background-color:transparent;
	color:white;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16.5px;	
	font-weight:600;
	height:auto;
	margin:0 auto;
	min-height:90vh;
	overflow:hidden;
	text-align:center;
}

What happens is that the 300px shell is drawn tight against the right edge of the narrower-than-specified window, and can be pulled back and forth.

If I manually resize the window to 400px it looks and works as intended. Should I focus on getting the window to draw the right size? Attempt to resize it on open? Or is there some different setting that would give me what I want?

On my iPhone 6s, The window fits the screen width and the shell div is centered. What am I missing to get the same results on the larger screen?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...