title: Any way to auto zoom browser based upon user's browser window?
body: <p>Is there any way to (across browsers) cause my website to auto zoom based on the user's browser window. </p>
  
  <p>I have a web app that is a fixed aspect ratio. It needs to be this way as the central function (video) is intended to stay on screen at all times. I will be using the sidebar with internal div for scrollable content. View my code below or the following fiddle to see the basic structure: <a href="http://jsfiddle.net/hkdeA/6/" rel="nofollow">http://jsfiddle.net/hkdeA/6/</a></p>
  
  <p>I've currently developed this in one size and first thought to translate all pixel data to percentages, i.e. responsive design, with even the containing div recalculating based upon the browser window (to either fit 100% height or 100% width). However, unlike most responsive design, EVERY element on my page needs to be scaled equally. To me, this creates a unique opportunity. Most responsive design could never utilize browser zoom to do the job because they only want some elements to scale up or down. For me, everything should go in unison. Going through every line of CSS to turn pixel values to percentages is a time consuming headache and I was hoping that, if possible, I could utilize browser zoom.</p>
  
  <p>However, is a way for me to access the browsers zooming capability and zoom the exact distance necessary to fit the browser window (in either height or width, depending on aspect ratio of browser window)? I'd think two steps would be necessary.</p>
  
  <ol>
  <li><p>Being able to actually access the zoom functionality without the user.</p></li>
  <li><p>Being able to calculate the zoom necessary (seems easy enough, as my design is a fixed width so any browser window size could be calculated and compared to my design and necessary zoom % calculated) and push that to the user's browser (for only my site!)</p></li>
  </ol>
  
  <p>But is it possible? The first replier has said no, no script can currently do this, but I was hoping to see if anyone else has some insight. Any and all help appreciated. Thanks! </p>
  
  <pre><code>    &lt;div id="container"&gt;
      &lt;div id="vid"&gt;
  
      &lt;/div&gt;
      &lt;div id="sidebar"&gt;
  
      &lt;/div&gt;
      &lt;div id="footer"&gt;
  
      &lt;/div&gt;    
  &lt;/div&gt;
  
  #container{
      background:grey;
      width:480px;
      height:270px;
      float:left;
  }
  
  #vid{
      background:black;
      width:320px;
      height:180px;
      float:left;
  }
  
  #sidebar{
      background:blue;
      width:160px;
      height:180px;
      float:right;
  }
  
  #foot{
      background:yellow;
      width:480px;
      height:90px;
      float:left;
  }
  </code></pre>