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

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

求横屏显示,不能竖屏。
有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式,还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。
那么现在的解决办法,就是在竖屏模式下,写一个横屏的div,然后把它转过来。

代码如下:

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

很简单对不对,最终的理想状态是,把lol非常和谐的横过来。
好了来看看区分横屏竖屏的css:

@media screen and (orientation: portrait) {
      html{ width : 100% ; height : 100% ;  padding: 0px;"> white ; overflow : hidden; } body{ width : 100% ; height : 100% ;  padding: 0px;"> red ; overflow : hidden; } #print{ position : absolute ;  padding: 0px;"> yellow ; } } @media screen and (orientation: landscape) { html{ width : 100% ; height : 100% ;  padding: 0px;"> white ; } body{ width : 100% ; height : 100% ;  padding: 0px;"> white ; } #print{ position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ;  padding: 0px;"> 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/520BigBear/p/7866474.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值