Set mobile page scale/zoom in CSS

Question

I'm making a theme for a site where I can't change the markup or include any JS. I can only control the CSS of my theme, and I can write some HTML inside the page body only.

I'm trying to make this theme responsive, but I can't see how to control initial-scale or page zoom on handheld devices without a viewport meta tag like this:

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

So what happens is that even though I can apply a mobile-specific layout through CSS @media queries, the site is zoomed out when viewed on a phone. Text and images are too small until you zoom in, and once you zoom in, the layout is too big and there's a horizontal scrollbar. It looks perfect inside a resized browser window on desktop; the issue is that the phone browser automatically scales the page.

So I'm seeking a workaround. I have two lines of thinking currently, and I'd welcome any other suggestions:

1. Is there any way to do what the viewport meta tag does in CSS alone?
2. Can I force a max page width in my mobile-specific styling so that mobile browsers will not scale the page?

Answer 1

There is @viewport, it might help you with that. But the support is very little. Have a look at this link http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/