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

2022-03-09 21:36:32 字數 1638 閱讀 8896

在這個背景下，雖然觸屏未做改動，但本著敏而好學，不斷探索的精神，針對如何讓web頁面強制橫屏顯示，做了一下試驗研究。

首先，當使用者豎屏開啟時，提示說你要把手機轉過來是在是件很傻×的事情。這時如果使用者沒開啟手機裡的橫屏模式，還要逼使用者去開啟。

這時候使用者早就不耐煩的把你的頁面關掉了。

我先進行了調研，想看有沒有現成的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>


12div


>


13body


>
很簡單對不對，最終的理想狀態是，把文字非常和諧的橫過來。

好了來看看區分橫屏豎屏的css：

1
說白了，是要把print這個div在豎屏模式下橫過來，橫屏狀態下不變。所以在portrait下，沒定義它的寬高。會通過下面的js來補。

1


var width =document.documentelement.clientwidth;


2var height =document.documentelement.clientheight;


3if( width 


在這裡我們先取得了螢幕內可用區域的寬高，然後根據寬高的關係來判斷是橫屏還是豎屏。如果是豎屏，就把print這個div的寬高設定下，對齊，然後旋轉。


最終效果如下：


豎屏


橫屏


最後，這麼做帶來的後果是，如果使用者手機的旋轉螢幕按鈕開著，那麼當手機橫過來之後，會造成一定的悲劇。解決辦法如下:


1var evt = "onorientationchange" in window ? "orientationchange" : "resize";


23     window.addeventlistener(evt, function


() 17


else


2526     }, false);
這樣當視窗大小變化和翻轉的時候就實現了自動強制橫屏~~

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

最近想 做乙個 手機遊戲 頁面，所以就 先攻克 手機橫屏的 難關。1.在豎屏 條件 下預設是 橫屏顯示的。2.即使使用者 開了 橫屏模式，介面的 橫屏模式 自動轉換 過來。1.html 結構 loading body 2.meta 標籤name viewport content width devi...

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

最近公司要開發乙個移動端的養成類網頁遊戲 就是用手點各種按鈕最後你會找到乙個女朋友 要求橫屏顯示，不能豎屏。有經驗的你肯定知道，當使用者豎屏開啟時，提示說你要把手機轉過來是在是件很傻 的事情。這時如果使用者沒開啟手機裡的橫屏模式，還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。我先進行...

移動端如何強制頁面橫屏

最近公司要開發乙個移動端的類網頁遊戲 長按按鈕有個自行車一直騎行，碰到某個國家的地標就彈出該國的相應say hello的tip，要求橫屏顯示，不能豎屏。然而當使用者豎屏開啟時，而且沒開啟手機裡的橫屏模式，還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。解決辦法就是在豎屏模式下，寫乙個橫...