title: Set mobile page scale/zoom in CSS
body: <p>I'm making a theme for a site where <strong>I can't change the markup or include any JS</strong>. I can only control the CSS of my theme, and I can write some HTML inside the page body only.</p>
  <p>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:</p>
  <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  </code></pre>
  <p>So what happens is that even though I can apply a mobile-specific layout through CSS <code>@media</code> 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.</p>
  <p>So I'm seeking a workaround. I have two lines of thinking currently, and I'd welcome any other suggestions:</p>
  <ol>
  <li>Is there any way to do what the viewport meta tag does in CSS alone?</li>
  <li>Can I force a max page width in my mobile-specific styling so that mobile browsers will not scale the page?</li>
  </ol>