Jay@TastefulTitles.com Posted April 21, 2020 Share Posted April 21, 2020 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 More sharing options...
dsonesuk Posted April 21, 2020 Share Posted April 21, 2020 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. Link to comment Share on other sites More sharing options...
Jay@TastefulTitles.com Posted April 25, 2020 Author Share Posted April 25, 2020 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. 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