Jay@TastefulTitles.com Posted May 2, 2020 Report Share Posted May 2, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now