移动端如何强制页面横屏

##背景

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

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

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

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

##纯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;

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

##js计算宽高、对齐、旋转

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

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

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

##最终方案

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

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

##完整代码

/*** 横竖屏* @param {Object}*/function changeOrientation($print) { var width = document.documentElement.clientWidth;var height = document.documentElement.clientHeight;if(width < height) {$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%');} 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);}

##总结

该方案只适合页面宽高占一屏，不适合可以滚动的方案用orientationchange和resize监听横竖屏切换会有延迟的问题，具体解决延迟的方案见我的另外一篇文章js实现手机横竖屏事件

##参考资料

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

##demo

女神之路ofo进入全球20国 ##代码 代码

/zuopf769/notebook/blob/master/fe/移动端如何强制页面横屏/README.md