0

jqueryとjavascriptを使用してズーム効果を作成しています（net.magazineで公開されたコード）が、次のステップで、このWebをさまざまなデバイスに調整しようとしています（メディアクエリなどを使用）検出しようとしている問題に直面していますウィンドウ サイズ (私のラップトップの画面サイズは . 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>
4

2 に答える 2

0

JSを使用する：

screen.width;
screen.height;

これにより、ブラウザのサイズではなく、*画面のサイズが検出されます

var winWidth = screen.width;
var winWidth = screen.height;
于 2012-07-30T15:04:08.850 に答える
0

私はあなたの質問に答える方法がわかりませんが、私はそれをグーグルで検索し、これを見つけました: http://www.javascripter.net/faq/browserw.htm

それが役に立てば幸い！=)

于 2012-07-30T15:00:31.410 に答える