前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5移动开发--强制手机横屏显示

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

作者头像
李海彬
发布2018-03-27 16:18:37
5.8K0
发布2018-03-27 16:18:37
举报
文章被收录于专栏:Golang语言社区

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

代码语言:javascript
复制
<!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>

效果图:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-09-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Golang语言社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档