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

在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>

效果图:

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2017-09-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

不懂代码的,但是这些都看懂了。程序员段子合集

程序猿要了3个孩子,分别取名叫Ctrl、Alt 和Delete,如果他们不听话,程序猿就只要同时敲他们一下就会好的。

2595
来自专栏腾讯开源的专栏

【开业大吉】ncnn君是大厨师

ncnn 君是做什么的? ncnn君是大厨师(框架),会做很多菜,但凡涉及人工智能的菜(应)肴(用)都可以做,比如类似于 faceu 的贴猫耳贴爱心,比如自动识...

3766
来自专栏Guangdong Qi

小Q-免费的数据能做大事情之天气部分未完待续,持续更新中

1792
来自专栏Python绿色通道

数据可视化 | 2018年北上广深空气质量分析

92.5是年均AQI值,从上面科普知识里可以知道,2017年天津整体空气质量只能是「良」中的下下等水平,与轻度污染近在咫尺。

1852
来自专栏iOS开发攻城狮的集散地

iOS 传感器集锦

2816
来自专栏域名资讯

wangming.com曾9.5万元结拍,如今价格16.24万元

近期,域名拍卖市场又结拍了不少好域名,其中双拼渔民wangming.com拍出24990美金,约16.24万元。

1890
来自专栏Python数据科学

Python数据可视化:2018年北上广深空气质量分析

92.5是年均AQI值,从上面科普知识里可以知道,2017年天津整体空气质量只能是「良」中的下下等水平,与轻度污染近在咫尺。

963
来自专栏SAP最佳业务实践

SAP最佳业务实践:MM–转包(138)-5收货&发票

3.9 MIGO从转包 PO 收货 供应商交付制造的产品准备在系统中为其过帐收货。 角色:仓库文员 后勤 -物料管理-采购 -采购订单 -后继功能 -收货 1...

3483
来自专栏lonelydawn的前端猿区

Vuex从入门到精通(三)

开始 前言 这一节,我们将通过一个实战案例 : 动态展示从后台返回的新闻列表 允许用户根据来源, 和 内容&标题 中的关键字对新闻列表进行筛选 来加...

3939
来自专栏Crossin的编程教室

王校长一分钟能吃多少热狗?| 小游戏

公元 2018 年 11 月 3 日,王思聪的创办的 iG 战队在《英雄联盟》比赛中以 3:0 的比分击败了 Fnatic 战队,夺得了 LPL 赛区的首个 S...

903

扫码关注云+社区

领取腾讯云代金券