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

小鱼儿 2022-05-26 07:37 361阅读 0赞

# 移动端如何让页面强制横屏   ---手势不支持旋转 #

[![96][]][96 1]

[stois][96 1]  关注

2016.02.15 11:26\*  字数 517  阅读 28174 评论 41 喜欢 54 赞赏 1

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

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

很简单对不对，最终的理想状态是，把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的宽高设置下，对齐，然后旋转。  
最终效果如下：

![332][]

竖屏

![566][]

横屏

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

好久之前写的文章了，没想到每天都有人来看。。。  
这个东西成品，请参见：[http://www.chubao.cn/s/godness/index.html][http_www.chubao.cn_s_godness_index.html]，用手机浏览器打开即可。

转自：https://www.jianshu.com/p/9c3264f4a405

[96]: /images/20220526/c90b417d429f47a092b8ba1e3301d303.png
[96 1]: https://www.jianshu.com/u/3a1735ae4f0f
[screen_api]: https://link.jianshu.com/?t=http://www.noupe.com/design/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639.html
[manifest]: https://link.jianshu.com/?t=https://w3c.github.io/manifest/
[332]: /images/20220526/5782ce0c69da4a15ad4c2318fc0a925e.png
[566]: /images/20220526/fa8f4b0bcc314154bfdfbba055570346.png
[http_www.chubao.cn_s_godness_index.html]: https://link.jianshu.com/?t=http://www.chubao.cn/s/godness/index.html