移動端如何強制頁面橫屏

背景

最近公司要開發一個移動端的類網頁游戲: 長按按鈕有個自行車一直騎行，碰到某個國家的地標就彈出該國的相應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);

辦公資源網址導航 https://www.wode007.com

 

完整代碼

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