Question

使用jquery和javascript创建缩放效果（在net.magazine中公布的代码）但在下一步中，尝试将此网络调整为不同的设备（使用媒体查询.etc）我遇到了问题我试图检测窗口大小（我的笔记本电脑屏幕尺寸是.1024 x 768）我得到窗口和文件宽度/高度相同的结果= 737x402！？为什么？是因为缩放比例不是全屏的吗？

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

Answer 1

我不知道如何回答你的问题，但我谷歌了，我发现了这个：http://www.javascripter.net/faq/browserw.htm

希望它有所帮助！ =）

Answer 2

使用JS：

screen.width;
screen.height;

这将检测*屏幕尺寸而不是浏览器尺寸

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

如何重置窗口宽度和窗口缩放？

2 个答案: