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

[Jay@TastefulTitles.com 0]

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>

 

[dsonesuk 913]

Can't you just use css media queries to identify phone orientation to set width, then min-height using vh/vw. It wouldn't be good idea to set fixed height as portrait orientation would create more lines.

[Jay@TastefulTitles.com 0]

It turns out I had merely neglected to include this line in my code:

      <meta name="viewport" content="width=device-width, initial-scale=1" />

Doing that took care of the problem. You'd think I would know better by now, but having never run into that before, it took me quite a while to find it.