移动端如何强制页面横屏

  1. 背景

最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应say hello的tip,要求横屏显示,不能竖屏。

然而当用户竖屏打开时,而且没开启手机里的横屏模式,还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。

而且有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。

解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

  1. 纯css

把main这个div在竖屏模式下横过来,横屏状态下不变。

@media screen and (orientation: portrait) {
.main {
-webkit-transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100vh;
height: 100vh;
/ 去掉overflow 微信显示正常,但是浏览器有问题,竖屏时强制横屏缩小
/
overflow: hidden;
}
}

@media screen and (orientation: landscape) {
.main {
-webkit-transform:rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
}
但是有个问题是在横屏模式下,利用css旋转90度后,宽和高不好控制。

width: 100vh;
height: 100vh;

这样控制宽高不太适合单屏宽高的页面。

  1. js计算宽高、对齐、旋转

上文提到了,在portrait下,旋转到横屏后宽和高会有问题。可以通过下面的js来实现。

var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if( width < height ){





p
r
i
n
t
=



(‘#print’);





p
r
i
n
t
.
w
i
t
h
(
h
e
i
h
t
)
;



print.height(width);





p
r
i
n
t
.
c
s
s
(

t
o



p






,
(
h
e
i
h
t

w
i
t
h
)


/


2
)
;



print.css(‘left’, 0-(height-width)/2 );





p
r
i
n
t
.
c
s
s
(

t
r
a
n
s
o
r



m






,

r
o
t
a
t
e
(
90
e



)






)
;



print.css(‘transform-origin’ , ‘50% 50%’);
}

需要注意的是transform-origin是50% 50%,旋转90deg后,还需要重新设置top和left将其对齐。

  1. 最终方案

如果用户手机的旋转屏幕按钮开着,那么当手机横过来之后,上面的代码还是有问题。

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);
  1. 完整代码

/**
* 横竖屏
* @param {Object}
*/
function changeOrientation(


print) {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if(width < height) {


print.width(height);





p
r
i
n
t
.
h
e
i
h
t
(
w
i
t
h
)
;



print.css(‘top’, (height – width) / 2 );





p
r
i
n
t
.
c
s
s
(

l
e



t






,
0

(
h
e
i
h
t

w
i
t
h
)


/


2
)
;



print.css(‘transform’, ‘rotate(90deg)’);
$print.css(‘transform-origin’, ‘50% 50%’);
}

var evt = “onorientationchange” in window ? “orientationchange” : “resize”;

window.addEventListener(evt, function() {

  setTimeout(function() {
      var width = document.documentElement.clientWidth;
      var height =  document.documentElement.clientHeight;
      // 刷新城市的宽度
      initCityWidth();
      // 初始化每个气泡和自行车碰撞的距离
      cityCrashDistanceArr = initCityCrashDistance();

    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%');
     }
}, 300);

}, false);
}
(最后给大家推荐一个前端内部学习群:675498134,进群找管理免费领取学习资料和视频。每天还有前端大牛直播讲解项目案例!大佬小白都欢迎,大家一起学习共同进步!)

极客头条稿源:极客头条 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 移动端如何强制页面横屏

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录