移動端如何強制頁面橫屏

標籤：css   http   ofo   開發   flow   dev   print   利用   amp   

背景

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

移動端如何強制頁面橫屏