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

最近公司要開發乙個移動端的養成類網頁遊戲（就是用手點各種按鈕最後你會找到乙個女朋友=。=），要求橫屏顯示，不能豎屏。

有經驗的你肯定知道，當使用者豎屏開啟時，提示說你要把手機轉過來是在是件很傻×的事情。這時如果使用者沒開啟手機裡的橫屏模式，還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。

我先進行了調研，想看有沒有現成的api。參考過screen的api以及manifest方法 ，實驗結果當然是不行。

那麼現在我唯一能想到的解決辦法，就是在豎屏模式下，寫乙個橫屏的div，然後把它轉過來。

好了我的測試頁面結構如下：

lolp>  

div>
body>
很簡單對不對，最終的理想狀態是，把lol非常和諧的橫過來。
好了來看看區分橫屏豎屏的css：
@media screen and (orientation: portrait) 
body
#print
} @media screen and (orientation: landscape) 
body
#print
}#print p

var width = document.documentelement.clientwidth;

var height = document.documentelement.clientheight;
if( width < height )

最終效果如下：

豎屏

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

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

window.addeventlistener(evt, function() 
else
}, false);

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

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

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

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

移動端如何強制頁面橫屏

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