H5移动开发--强制手机横屏显示

李海彬

发布于 2018-03-27 16:18:37

5.8K0

发布于 2018-03-27 16:18:37

文章被收录于专栏：Golang语言社区

在H5开发手机游戏中，横屏游戏还是主流；竖屏游戏思路一样，本节不做讨论。直接上代码

<!doctype html>

<html lang="zh-CN">



        <head>

                <meta charset="UTF-8">

                <title>h5 手机游戏开发</title>

                <link rel="stylesheet" href="css/test.css" />

                <script type="text/javascript" src="js/jquery-2.2.1.js" ></script>

        </head>

        <body class="webpBack">

                <div id="print">

                        <img src="img/beijing.jpg"  height="100%" width="100%"/>

                </div>

 

                <script type="text/javascript">

                        var evt = "onorientationchange" in window ? "orientationchange" : "resize";

                        window.addEventListener(evt, function() {

                                console.log(evt);

                                var width = document.documentElement.clientWidth;

                                var height = document.documentElement.clientHeight;

                                $print = $('#print');

                                if(width > height) {

                                        $print.width(width);

                                        $print.height(height);

                                        $print.css('top', 0);

                                        $print.css('left', 0);

                                        $print.css('transform', 'none');

                                        $print.css('transform-origin', '50% 50%');

                                } else {

                                        $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%');

                                }

                        }, false);

                </script>

        </body>



</html>

效果图：