移動端如何強制頁面橫屏

背景

最近公司要開發一個移動端的類網頁遊戲: 長按按鈕有個自行車一直騎行，碰到某個國家的地標就彈出該國的相應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實現手機橫豎屏事件

參考資料

• 移動端如何讓頁面強制橫屏

demo

• 女神之路
• ofo進入全球20國

代碼

代碼

https://github.com/zuopf769/notebook/blob/master/fe/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%A6%82%E4%BD%95%E5%BC%BA%E5%88%B6%E9%A1%B5%E9%9D%A2%E6%A8%AA%E5%B1%8F/README.md