title: how to reset window width and window scale onload?
body: <p>im creating  a zoom effect using  jquery and javascript, (a code that was publised in net.magazine)
   but in my next step, trying  to adjust  this web to different devices( using media query .etc)
  i face a problem 
  im trying to detect window size (my laptop  screen size is . 1024 x 768)
  and i get both window and  document  width/height  same result  =737x402 !?why?
  is it because the scale onload is not fullscreen?</p>
  
  <hr>
  
  <pre><code>&lt;div id=wrap&gt;
  
  &lt;div id=container&gt; 
  
  &lt;div id=content&gt;
  
  &lt;div class=section id=first &gt;&lt;/div&gt;
  
  &lt;div class=section id=second &gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id=scroller &gt;&lt;/div&gt;
  </code></pre>
  
  <p>the css</p>
  
  <pre><code>body{
  margin: 0;
  padding: 0; 
  
  }
  #wrap {
  position: fixed;
  width: 100%;
  }
  #scroller {
  height: 1500px;
  }
  #container {
   position: relative;
   top:-57px;
   margin:0 auto;
  width: 1070px;
  height: 665px;
  }
  #content {
  height: 665px;
  position: absolute;
  width: 100%;
  }
  #front-first {
    -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
  background: url(images/pic1.jpg) no-repeat;
        background-size:70%;
  position: absolute;
   z-index:20;
  display: block;
  width: 1070px;
  height: 665px;
  margin: 0 auto;
   }
  
   #front-second {
  -webkit-transform: scale(0.3333);
   -moz-transform: scale(0.3333);
   -o-transform: scale(0.3333);
    transform: scale(0.3333);
      background: url(images/pic2.jpg) no-repeat;
        background-size:70%;
     position: absolute;
     z-index:20;
     display: block;
     width: 1070px;
     height: 665px;
    margin: 0 auto;
     }
  
  
     &lt;script&gt;
  
  
  $(document).ready(function(){    
  browserWindowheight = $(window).height();
  alert(browserWindowheight);
  browserWindowwidth = $(window).width();
  alert(browserWindowwidth);
  
  
          function Zoomer(content) {
              this.content = content;
              this.scrolled = 0;
              this.levels = 4;
              this.docHeight = document.documentElement.offsetHeight;
              // bind Zoomer to scroll event
              window.addEventListener('scroll', this, false);
          }
  
          Zoomer.prototype.handleEvent = function(event) {
              if(this[event.type]) {
                  this[event.type](event);
              }
          };
          Zoomer.prototype.scroll = function(event) {
              this.scrolled = window.scrollY / (this.docHeight - window.innerHeight );
          };
          Zoomer.prototype.scroll = function(event) {
              this.scrolled = window.scrollY / (this.docHeight - window.innerHeight );
              var scale = Math.pow(3, this.scrolled * this.levels), transformValue = 'scale(' + scale + ')';
              this.content.style.WebkitTransform = transformValue;
              this.content.style.MozTransform = transformValue;
              this.content.style.OTransform = transformValue;
              this.content.style.transform = transformValue;
          };
          function init() {
              var content = document.getElementById('content'),
              // init Zoomer constructor
              ZUI = new Zoomer(content);
          }
  
          window.addEventListener('DOMContentLoaded', init, false);
                   }); 
               &lt;script&gt;
               &lt;/html&gt;         
  </code></pre>