Nevermind, it was an ID-Ten-T error :-/ I forgot to have this in the header:

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

Since we're on it, though, I have this in the main CSS:

html, body {
min-width: 760px;
height: 100%;
}

.container { width: 100%; max-width: 975px }

The idea is that when they're on desktop (greater than 800px width) the content will have a maximum width of 975px; otherwise, it's 100% of the screen.

On my mobile, though, I have to scroll a tad to the right to see everything. Not tragic, but a little annoying. I'm guessing that it's because the zoom is going to 200%, and with screen.width being 360px that would get it to 720px; leaving 40px off screen to the right.

Is there a way to make all mobile devices zoom to 760px?

I can only guess that your container is overruled by higher rules. I can't see the order or guess what @media rules are in effect. By any chance have you run your css through something like jigsaw to see possible conflicts? There is a link in the charter if you want to try that: [webmasterworld.com...]

I had not, but I just now did. No conflict, the only issues given were a bunch of warnings about vendor extensions.

I THINK, though, that the issue is that I've assigned a min-width of 760px to html and body. I removed that for testing, and while it solved the immediate issue of zooming it messed up all of my nested elements :-O That's why I was hoping that there might be an easy way to adjust the zoom rather than go through the whole site and try to adjust everything manually.

@media (max-width: 800px)

Huh. I always express it as

@media screen and (max-width: 800px)

Does it work the same either way?

Why do you need a min-width at all for devices that are certainly going to be a good deal wider than 760px anyway?

fwiw, I've had unpredictable results combinging {width} and {max-width} in the same statement.

I originally had @media only screen {max-width: 800px), but realized that "only screen" was irrelevant for me. The only mediatype options are all, screen, print, or speech, with "all" being the default if nothing is specified. Since I have no interest in anyone printing my pages and have never created CSS for speech readers, I might as well let it default to all.

Why do you need a min-width at all for devices that are certainly going to be a good deal wider than 760px anyway?

Here me out here, because you might suggest something better!

I originally had something like this (from memory):

html, body { height: 100% }
.container { width: 975px }

@media (max-width: 800px) {
 .container { width: 760px !important }
}

But I was trying to skip the overwrite by just setting a minimum and maximum width.

I'm trying to accommodate old code with tables and fixed-widths, and if their width is 360px then I still need for the container to be 760px. So that min-width is really for mobile devices, and (in theory) would have no impact on larger devices.

fwiw, I've had unpredictable results combinging {width} and {max-width} in the same statement.

Hmm. I thought it possible that width: 100% would be irrelevant anyway, so I just not removed it for testing and it messed up a bunch of my floating elements :-/ So far it seems OK, but I've only tested on the current versions of Chrome, Firefox, and my Android. Any suggestions on what unpredictability I should be on the lookout for?

* err, for which I should be on the lookout?
"Sorry. Sorry everybody!" - Neil Goldman