Jump to content

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


Jay@TastefulTitles.com
 Share

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 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...