• 移动浏览器横屏


    横屏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,
                    height,
                    transform:'translate( '+ ((width-height)/2) +'px,'+ ((height-width)/2) +'px) rotate(90deg)'
                });
            });
            $window.resize();
        })
    </script>
    </body>
    </html>
    

      

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

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

    By:AepKill

  • 相关阅读:
    JavaScript数组升降序排列、最大值、最小值等
    css3箭头
    隐藏显示
    最后一个 last-of-type
    jquery函数封装
    为什么要使用rem
    Git的使用--如何将本地项目上传到Github
    jQuery判断是否选中
    数组索引赋值
    HTML中input和button设置同样高度却不能等高的原因
  • 原文地址:https://www.cnblogs.com/aepkill/p/4935363.html
Copyright © 2020-2023  润新知