scale

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        body{background:#ddd;}

        .wrap{position:absolute;left:50%;margin-left:-160px;top:0;width:320px;height:504px;background:red;}

    </style>

</head>

<body>

    <div class="wrap">wrap</div>

    <script src="http://static01.baomihua.com/js/core/jquery-1.8.3.min.js"></script>

    <script>

        var autoScale = function() {

            setTimeout(function() {

                var winW = document.documentElement.clientWidth;

                var winH = document.documentElement.clientHeight;

                var scaleW = winW / 320;

                scaleW = Math.min (2,scaleW);

                var scaleH = winH / 504;

                scaleH = Math.min (2,scaleH);

                var scale = scaleW, cssText;

                cssText = '-webkit-transform: scale(' + scaleW +',' + scaleH + ');-webkit-transform-origin: top; opacity: 1;';

                $('.wrap').attr('style', cssText);

            }, 300);

        }

        autoScale()

        $(window).resize(autoScale)

    </script>

</body>

</html>

 

你可能感兴趣的:(ca)