2012-07-30 43 views
0

即时创建使用jQuery和JavaScript,(在net.magazine公布的代码) ,但在我的下一个步骤,试图调整此网络到不同的设备(使用媒体查询.etc) 我面临一个问题 即时通讯设法检测窗口大小(我的笔记本电脑屏幕尺寸是1024 x 768) ,我同时获得窗口和文档宽度/高度相同的结果= 737x402!?为什么? 是否因为scale onload不是全屏?如何重置窗口宽度和窗口比例onload?


<div id=wrap> 

<div id=container> 

<div id=content> 

<div class=section id=first ></div> 

<div class=section id=second ></div> 

</div> 
</div> 
</div> 

<div id=scroller ></div> 

的CSS

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; 
    } 


    <script> 


$(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); 
       }); 
      <script> 
      </html>   

回答

0

我不知道如何回答你的问题,但我google一下,我发现这一点:http://www.javascripter.net/faq/browserw.htm

希望它能帮助! =)

+0

谢谢:)但我仍然得到同样的结果740X400不知道为什么 – tali 2012-07-31 05:11:23

0

使用JS:

screen.width; 
screen.height; 

这将检测*屏幕大小,而不是浏览器的大小

var winWidth = screen.width; 
var winWidth = screen.height; 
+0

喜谢谢,但我再次得到相同的结果-740而不是1204。 – tali 2012-07-31 05:16:39