h5移动端如何让页面强制横屏
最近公司要開發(fā)一個(gè)移動(dòng)端的養(yǎng)成類網(wǎng)頁游戲（就是用手點(diǎn)各種按鈕最后你會(huì)找到一個(gè)女朋友=。=），要求橫屏顯示，不能豎屏。
有經(jīng)驗(yàn)的你肯定知道，當(dāng)用戶豎屏打開時(shí)，提示說你要把手機(jī)轉(zhuǎn)過來是在是件很傻×的事情。這時(shí)如果用戶沒開啟手機(jī)里的橫屏模式，還要逼用戶去開啟。這時(shí)候用戶早就不耐煩的把你的游戲關(guān)掉了。
我先進(jìn)行了調(diào)研，想看有沒有現(xiàn)成的api。參考過screen的api以及manifest方法 ，實(shí)驗(yàn)結(jié)果當(dāng)然是不行。
那么現(xiàn)在我唯一能想到的解決辦法，就是在豎屏模式下，寫一個(gè)橫屏的div，然后把它轉(zhuǎn)過來。
好了我的測試頁面結(jié)構(gòu)如下：
<body class="webpBack"><div id="print"><p>lol</p> </div> </body>很簡單對不對，最終的理想狀態(tài)是，把lol非常和諧的橫過來。
好了來看看區(qū)分橫屏豎屏的css：
說白了，是要把print這個(gè)div在豎屏模式下橫過來，橫屏狀態(tài)下不變。所以在portrait下，沒定義它的寬高。會(huì)通過下面的js來補(bǔ)。
var width = document.documentElement.clientWidth;var height = document.documentElement.clientHeight;if( width < height ){console.log(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%');}在這里我們先取得了屏幕內(nèi)可用區(qū)域的寬高，然后根據(jù)寬高的關(guān)系來判斷是橫屏還是豎屏。如果是豎屏，就把print這個(gè)div的寬高設(shè)置下，對齊，然后旋轉(zhuǎn)。
最終效果如下：
最后，這么做帶來的后果是，如果用戶手機(jī)的旋轉(zhuǎn)屏幕按鈕開著，那么當(dāng)手機(jī)橫過來之后，會(huì)造成一定的悲劇。解決辦法如下:
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);
這個(gè)東西成品，請參見：http://www.chubao.cn/s/godness/index.html，用手機(jī)瀏覽器打開即可。
?轉(zhuǎn)自：https://www.jianshu.com/p/9c3264f4a405
?
總結(jié)
以上是生活随笔為你收集整理的h5移动端如何让页面强制横屏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 道奇酷威为什么便宜？
- 下一篇： H5弹窗，弹出toast（横竖屏通用）