背景 最近公司要開發一個移動端的類網頁游戲: 長按按鈕有個自行車一直騎行，碰到某個國家的地標就彈出該國的相應say hello的tip，要求橫屏顯示，不能豎屏。 然而當用戶豎屏打開時，而且沒開啟手機里的橫屏模式，還要逼用戶去開啟。這時候用戶早就不耐煩的把你的游戲關掉了。 而且有些機型有些app不能橫 ...
背景
最近公司要開發一個移動端的類網頁游戲: 長按按鈕有個自行車一直騎行，碰到某個國家的地標就彈出該國的相應say hello的tip，要求橫屏顯示，不能豎屏。
然而當用戶豎屏打開時，而且沒開啟手機里的橫屏模式，還要逼用戶去開啟。這時候用戶早就不耐煩的把你的游戲關掉了。
而且有些機型有些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實現手機橫豎屏事件
