移動端如何讓頁面強制橫屏
阿新 • • 發佈:2017-11-20
nds 悲劇 顯示 uil 把手 如果 它的 rip js xml
豎屏
橫屏
求橫屏顯示,不能豎屏。
有經驗的你肯定知道,當用戶豎屏打開時,提示說你要把手機轉過來是在是件很傻×的事情。這時如果用戶沒開啟手機裏的橫屏模式,還要逼用戶去開啟。這時候用戶早就不耐煩的把你的遊戲關掉了。
那麽現在的解決辦法,就是在豎屏模式下,寫一個橫屏的div,然後把它轉過來。
代碼如下:
<body class="webpBack">
<div id="print">
<p>lol</p>
</div>
</body>
很簡單對不對,最終的理想狀態是,把lol非常和諧的橫過來。
好了來看看區分橫屏豎屏的css:
@media screen and (orientation: portrait) {
html{
width : 100% ;
height : 100% ;
padding: 0px;"> white ;
overflow : hidden;
}
body{
width : 100% ;
height : 100% ;
padding: 0px;"> red ;
overflow : hidden;
}
#print{
position : absolute ;
padding: 0px;"> yellow ;
}
}
@media screen and (orientation: landscape) {
html{
width : 100% ;
height : 100% ;
padding: 0px;"> white ;
}
body{
width : 100% ;
height : 100% ;
padding: 0px;"> white ;
}
#print{
position : absolute ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
padding: 0px;"> yellow ;
}
}
#print p{
margin: auto ;
margin-top : 20px ;
text-align: center;
}
說白了,是要把print這個div在豎屏模式下橫過來,橫屏狀態下不變。所以在portrait下,沒定義它的寬高。會通過下面的js來補。
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%‘);
}
在這裏我們先取得了屏幕內可用區域的寬高,然後根據寬高的關系來判斷是橫屏還是豎屏。如果是豎屏,就把print這個div的寬高設置下,對齊,然後旋轉。
最終效果如下:
豎屏
橫屏
最後,這麽做帶來的後果是,如果用戶手機的旋轉屏幕按鈕開著,那麽當手機橫過來之後,會造成一定的悲劇。解決辦法如下:
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);
移動端如何讓頁面強制橫屏