Jump to content

Window.open() sizing doesn't affect small screen


Recommended Posts

My site opens a window using this code:

function view() {
	var title=workId("title");
	var L = (screen.width - 355) / 2;
	var H = screen.height;
	var p = 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=339,height='+H+',top=0,left='+L+'"';
	window.open("/slides/"+title+".html", "_blank", p); 
}

I've hard coded the width of the window because it is essentially a popup and needs to be that width to have the right proportions. The longest lines of text should fill the box without breaking. When I view it in Safari's "Responsive Design Mode", it looks as it should for every size device, but when I open it on my iPhone 6s, it becomes very tiny. It can easily be enlarged to the proper size, but the boxes are much wider than the text, although the vertical fit is perfect. What am I missing to have it show up right on a phone? Why doesn't it look like the "Responsive Design Mode" image?

The file is here, but of course if you open it directly, it won't get the window sizing from the window.open statement. I'm guessing the phone pays no attention to the window.open sizing, but I don't know how else to size it.

FWIW, this is the css code I'm using:

<style>
body {
	background-image:url(http://tastefultitles.com/images/Curtain%20narrow.jpg); 
	background-size:100vw;
	font-family:Arial, Helvetica, sans-serif, Gadget, sans-serif;
	font-weight:600;
	text-align:center;
	margin:8pt;
}
div:not(#shell){
	margin-bottom:8px;
	padding-bottom:1em;
	background-color:black;
	color:white;
	height:2em;
	overflow:hidden;
	font-size:14px;	
}
p {
	margin:0;
	line-height:1.3em;
}
p:first-of-type {
	padding-top:0.2em;
}
p:only-of-type {
	padding-top:0.8em;
}
p:nth-child(2) {
	padding-top:0;
}
.l {
	border-bottom: 1px solid white;
}
</style>

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...