移動端如何強制頁面橫屏

1. 背景

最近公司要開發一個移動端的類網頁游戲: 長按按鈕有個自行車一直騎行，碰到某個國家的地標就彈出該國的相應say hello的tip，要求橫屏顯示，不能豎屏。

然而當用戶豎屏打開時，而且沒開啟手機里的橫屏模式，還要逼用戶去開啟。這時候用戶早就不耐煩的把你的游戲關掉了。

而且有些機型有些app不能橫屏：比如Android的微信就沒有橫屏模式，而ios的微信能開啟橫屏模式。

解決辦法就是在豎屏模式下，寫一個橫屏的div，然后設置rotate正（負）90度，把他旋轉過來；而且如果用戶切到橫屏時，需要把rotate復原，要求也能正常展現。

2. 純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;

這樣控制寬高不太適合單屏寬高的頁面。

3. 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將其對齊。

4. 最終方案

如果用戶手機的旋轉屏幕按鈕開着，那么當手機橫過來之后，上面的代碼還是有問題。

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

5. 完整代碼

/** * 橫豎屏 * @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); }