移動端如何強制頁面橫屏

最近公司要開發乙個移動端的類網頁遊戲: 長按按鈕有個自行車一直騎行，碰到某個國家的地標就彈出該國的相應say hello的tip，要求橫屏顯示，不能豎屏。

然而當使用者豎屏開啟時，而且沒開啟手機裡的橫屏模式，還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。

解決辦法就是在豎屏模式下，寫乙個橫屏的div，然後設定rotate正（負）90度，把他旋轉過來；而且如果使用者切到橫屏時，需要把rotate復原，要求也能正常展現。

把main這個div在豎屏模式下橫過來，橫屏狀態下不變。

但是有個問題是在橫屏模式下，利用css旋轉90度後，寬和高不好控制。

width:100vh;height:100vh;

上文提到了，在portrait下，旋轉到橫屏後寬和高會有問題。可以通過下面的js來實現。

varwidth =document.documentelement.clientwidth;varheight =document.documentelement.clientheight;if(width 

如果使用者手機的旋轉螢幕按鈕開著，那麼當手機橫過來之後，上面的**還是有問題。

varevt ="onorientationchange"inwindow ?"orientationchange":"resize";window.addeventlistener(evt,function()else},false);

/**

* 橫豎屏
* @param 
*/functionchangeorientation($print)varevt ="onorientationchange"inwindow ?"orientationchange":"resize";window.addeventlistener(evt,function()else{$print.width(height

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

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

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

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

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

在這個背景下，雖然觸屏未做改動，但本著敏而好學，不斷探索的精神，針對如何讓web頁面強制橫屏顯示，做了一下試驗研究。首先，當使用者豎屏開啟時，提示說你要把手機轉過來是在是件很傻 的事情。這時如果使用者沒開啟手機裡的橫屏模式，還要逼使用者去開啟。這時候使用者早就不耐煩的把你的頁面關掉了。我先進行了調研...