移动浏览器横屏

横屏Test@AepKill

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <title>TEST @ AepKill</title>
    <script src="./js/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div class="wrap" id="wrap">
        <span>横屏啦啦啦</span>
    </div>
<script>
    $(function(){
        var $window=$(window);
        $window.on('resize',function(){
            var height=$window.height(),width=$window.width(),tX,tY;
            $('#wrap').css({
                height:width,
                width:height,
                transform:'translate( '+ ((width-height)/2) +'px,'+ ((height-width)/2) +'px) rotate(90deg)'
            });
        });
        $window.resize();
    })
</script>
</body>
</html>

　　

原理：把一个和屏幕大小一样的div移动到屏幕中心再旋转90度就好了，还是非常简单的。

局限：尺寸只能小于等于屏幕，不然就出滚动条了，这个可以考虑自建滚动条解决，较为麻烦，因为我们就是一个和屏幕相当全屏的页面，所以就不管了。　　

By:AepKill

posted @ 2015-11-04 11:10  AepKill  阅读(303)  评论(0)  编辑  收藏  举报