移动端如何让页面强制横屏

字数700 阅读4734 评论8 喜欢8

最近公司要开发一个移动端的养成类网页游戏（就是用手点各种按钮最后你会找到一个女朋友=。=），要求横屏显示，不能竖屏。
有经验的你肯定知道，当用户竖屏打开时，提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式，还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。
我先进行了调研，想看有没有现成的api。参考过screen的api以及manifest方法，实验结果当然是不行。
那么现在我唯一能想到的解决办法，就是在竖屏模式下，写一个横屏的div，然后把它转过来。

好了我的测试页面结构如下：

<body class="webpBack"><div id="print"> <p>lol</p> </div> </body>

很简单对不对，最终的理想状态是，把lol非常和谐的横过来。
好了来看看区分横屏竖屏的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 ; } } @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; }

说白了，是要把print这个div在竖屏模式下横过来，横屏状态下不变。所以在portrait下，没定义它的宽高。会通过下面的js来补。

  var width = document.documentElement.clientWidth;var height =  document.documentElement.clientHeight;if( width < height ){console.log(width + " " + height); $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%'); }

在这里我们先取得了屏幕内可用区域的宽高，然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏，就把print这个div的宽高设置下，对齐，然后旋转。
最终效果如下：

竖屏

横屏

最后，这么做带来的后果是，如果用户手机的旋转屏幕按钮开着，那么当手机横过来之后，会造成一定的悲剧。解决办法如下:

 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);

转载于:https://www.cnblogs.com/yangmengsheng/p/6215331.html

移动端如何让页面强制横屏相关推荐

[html] 移动端如何让页面强制横屏显示？
[html] 移动端如何让页面强制横屏显示? 说个想法不一定能实现web端的话通过判断页面屏幕宽度(这个得开陀螺仪权限吧) 然后经行div旋转个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...
html5页面强制横屏,移动端如何让页面强制横屏
移动设备可以旋转屏幕,但如何做到就算旋转手机页面始终横屏显示呢?首先取得屏幕内可用区域的宽高,然后根据宽高的关系来判断是横屏还是竖屏.如果是竖屏,就把div的宽高设置成横屏的高宽,然后旋转. 好了我的 ...
h5移动端如何让页面强制横屏
最近公司要开发一个移动端的养成类网页游戏(就是用手点各种按钮最后你会找到一个女朋友=.=),要求横屏显示,不能竖屏. 有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情. ...
html 静止横屏,CSS实现Html页面强制横屏
说起来html页面强制横屏,最多的都是js实现html页面强制横屏,用css实现这个功能的,很少人知道,那么今天就谈一谈如何用CSS实现html页面横屏显示,无论用户怎么旋转手机都是横屏!!! 场景分 ...
Css实现手机端页面强制横屏
样式 @media screen and (orientation: portrait) {html{width : 100vmin;height : 100vmax;}body{width : 10 ...
手机html强制横屏显示,Css实现手机端页面强制横屏(仅适用与一屏页面)
样式 @media screen and (orientation: portrait) { html{ width : 100vmin; height : 100vmax; } body{ widt ...
设置安卓app页面强制横屏或者竖屏，不随手机姿势变化
在AndroidMainfest.XML中, 加入到activity在mainfest的注册信息中 android:screenOrientation="portrait" //强 ...
php页面强制横屏,iOS强制横屏总结
总体方向两点: model下,present方式推出界面. push横屏,带tabbar.navigation,且一个item下所有控制器对应的只有一个根navigation. 接下来说说push方式 ...
cordova 某个页面强制横屏_小白科普：从输入网址到最后浏览器呈现页面内容，中间发生了什么？...
老刘 1前言这篇文章是应网友之邀所写,主要描述一下我们访问网站时, 从输入网址到最后浏览器呈现内容,中间发生了什么. 今天的文章主要专注于应用层,我拿了一个很简单的网络结构来讲.假定本机已经获取了I ...

移动端如何让页面强制横屏

移动端如何让页面强制横屏

移动端如何让页面强制横屏相关推荐

最新文章

热门文章