I'm not sure if the solution here will be in HTML, JavaScript, or CSS, so I'm putting it under General.
I'm rebuilding a dated design, but want to improve the original design a little in the meanwhile. The design isn't really responsive, it just has a 760px width layout and a separate 975px width layout (which really just hides a 200px width right column), then reads JavaScript's
screen.width to determine which one to show. Both are centered with a default black background. Mobile users see the 760px width version.
I don't know about iPhones, but when I open the page on my Android I have a large black border on the left and right. I took a screenshot: the width of that image is 1080px, and the contents is 838px! So I have a 121px border on either side :-O
I'm not sure where the 838px comes from, unless it's zoomed in a little by default? But the page is built around the assumption that the width will be set, so I can't simply change one setting; if I do, the whole thing shifts and falls apart.
Here's the relevant code, with the "body_con" element surrounding the entire contents of the page (so that it can be centered against the background):
// CSS
html, body { min-width: 760px }
#body_con {
position: relative;
text-align: left;
z-index: 2
}
.ctr { margin-left: auto; margin-right: auto }
.a { width: 100%; overflow: hidden }
// HTML
<body>
<div id="body_con" class="a ctr">
// HTML stuff
</div>
</body>
I tried this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
but it zoomed in WAY too far! And then I couldn't zoom back out, or scroll to the right.
Knowing that every phone is going to have a different resolution, how can I make it zoom in on "body_con"?
