移動端web如何讓頁面強制橫屏
阿新 • • 發佈：2018-11-26
前段時間公司針對直播服務做了改版升級，APP客戶端支援了橫屏和豎屏推流/播放。
在這個背景下，雖然觸屏未做改動，但本著敏而好學，不斷探索的精神，針對如何讓web頁面強制橫屏顯示，做了一下試驗研究。
首先，當用戶豎屏開啟時，提示說你要把手機轉過來是在是件很傻×的事情。這時如果使用者沒開啟手機裡的橫屏模式，還要逼使用者去開啟。
這時候使用者早就不耐煩的把你的頁面關掉了。
我先進行了調研，想看有沒有現成的api。實驗結果當然是不行。 那麼我唯一能想到的解決辦法，就是在豎屏模式下，寫一個橫屏的div，然後把它轉過來。
我的測試頁面結構如下：
我先進行了調研，想看有沒有現成的api。實驗結果當然是不行。 那麼我唯一能想到的解決辦法，就是在豎屏模式下，寫一個橫屏的div，然後把它轉過來。
我的測試頁面結構如下：
1 <body class="webpBack"> 2 <div id="print"> 3 <p>看我看我，快看我~</p> 4 <p>看我看我，快看我~</p> 5 <p>看我看我，快看我~</p> 6 <p>看我看我，快看我~</p> 7<p>看我看我，快看我~</p> 8 <p>看我看我，快看我~</p> 9 <p>看我看我，快看我~</p> 10 <p>看我看我，快看我~</p> 11 <p>看我看我，快看我~</p> 12 </div> 13 </body>
很簡單對不對，最終的理想狀態是，把文字非常和諧的橫過來。
好了來看看區分橫屏豎屏的css：
1 <style> 2 @media screen and (orientation: portrait){ 3 html { 4 width: 100%; 5 height: 100%; 6 background-color: white; 7 overflow: hidden; 8 } 9 10 body { 11 width: 100%; 12 height: 100%; 13 background-color: red; 14 overflow: hidden; 15 } 16 17 #print { 18 position: absolute; 19 background-color: yellow; 20 } 21 } 22 23 @media screen and (orientation: landscape) { 24 html { 25 width: 100%; 26 height: 100%; 27 background-color: white; 28 } 29 30 body { 31 width: 100%; 32 height: 100%; 33 background-color: white; 34 } 35 36 #print { 37 position: absolute; 38 top: 0; 39 left: 0; 40 width: 100%; 41 height: 100%; 42 background-color: yellow; 43 } 44 } 45 46 #print p { 47 margin: auto; 48 margin-top: 20px; 49 text-align: center; 50 } 51 </style>
說白了，是要把print這個div在豎屏模式下橫過來，橫屏狀態下不變。所以在portrait下，沒定義它的寬高。會通過下面的js來補。
1 var width = document.documentElement.clientWidth; 2 var height = document.documentElement.clientHeight; 3 if( width < height ){ 4 console.log(width + " " + height); 5 $print = $('#print'); 6 $print.width(height); 7 $print.height(width); 8 $print.css('top', (height-width)/2 ); 9 $print.css('left', 0-(height-width)/2 ); 10 $print.css('transform' , 'rotate(90deg)'); 11 $print.css('transform-origin' , '50% 50%'); 12 }
在這裡我們先取得了螢幕內可用區域的寬高，然後根據寬高的關係來判斷是橫屏還是豎屏。如果是豎屏，就把print這個div的寬高設定下，對齊，然後旋轉。
最終效果如下：
豎屏
橫屏
最後，這麼做帶來的後果是，如果使用者手機的旋轉螢幕按鈕開著，那麼當手機橫過來之後，會造成一定的悲劇。解決辦法如下:
1 var evt = "onorientationchange" in window ? "orientationchange" : "resize"; 2 3 window.addEventListener(evt, function() { 4 console.log(evt); 5 var width = document.documentElement.clientWidth; 6 var height = document.documentElement.clientHeight; 7 $print = $('#print'); 8 if( width > height ){ 9 10 $print.width(width); 11 $print.height(height); 12 $print.css('top', 0 ); 13 $print.css('left', 0 ); 14 $print.css('transform' , 'none'); 15 $print.css('transform-origin' , '50% 50%'); 16 } 17 else{ 18 $print.width(height); 19 $print.height(width); 20 $print.css('top', (height-width)/2 ); 21 $print.css('left', 0-(height-width)/2 ); 22 $print.css('transform' , 'rotate(90deg)'); 23 $print.css('transform-origin' , '50% 50%'); 24 } 25 26 }, false);
這樣當視窗大小變化和翻轉的時候就實現了自動強制橫屏~~
作者：舊舊的 <[email protected]> 解決問題的方式，就是解決它一次