页面强制横屏

最新推荐文章于 2022-12-20 23:29:05 发布

weixin_30532837

最新推荐文章于 2022-12-20 23:29:05 发布

阅读量189

点赞数

原文链接：http://www.cnblogs.com/kcat/p/9549060.html

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <style type="text/css">
            @media screen and (orientation: portrait) {
                html {
                    width: 100%;
                    height: 100%;
                    background-color: white;
                    overflow: hidden;
                }
                body {
                    width: 100%;
                    height: 100%;
                    background-color: red;
                    overflow: hidden;
                }
                #print {
                    position: absolute;
                    background-color: yellow;
                    width: 100%;
                    height: 100%;
                }
            }
            
            @media screen and (orientation: landscape) {
                html {
                    width: 100%;
                    height: 100%;
                    background-color: white;
                }
                body {
                    width: 100%;
                    height: 100%;
                    background-color: white;
                }
                #print {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: yellow;
                }
            }
            
            #print p {
                margin: auto;
                margin-top: 20px;
                text-align: center;
                font-style: normal;
            }
        </style>
    </head>

    <body>

        <body class="webpBack">
            <div id="print">
                <p>文本</p>
            </div>
        </body>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
            function SetHorizontal() {
                var width = document.documentElement.clientWidth;
                var height = document.documentElement.clientHeight;
                $print = $('#print');
                $print.width(height);
                $print.height(width);
                $print.css('top', (height - width) / 2);
                $print.css('left', 0 - (height - width) / 2);
                $print.css('transform', 'rotate(90deg)');
                $print.css('transform-origin', '50% 50%');
            }

            function SetNormal() {
                var width = document.documentElement.clientWidth;
                var height = document.documentElement.clientHeight;
                $print = $('#print');
                $print.width(width);
                $print.height(height);
                $print.css('top', 0);
                $print.css('left', 0);
                $print.css('transform', 'none');
                $print.css('transform-origin', '50% 50%');
            }
            SetHorizontal();
            $(window).resize(function() {
                var width = document.documentElement.clientWidth;
                var height = document.documentElement.clientHeight;
                if(width > height) {
                    SetNormal();
                } else {
                    SetHorizontal();
                }
            });
        </script>
    </body>

</html>

原文链接:https://www.jianshu.com/p/9c3264f4a405

转载于:https://www.cnblogs.com/kcat/p/9549060.html

weixin_30532837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面强制横屏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫