移动端如何让页面强制横屏

2023年12月6日发(作者：)

移动端如何让页面强制横屏

好了我的测试页面结构如下：

很简单对不对，最终的理想状态是，把lol非常和谐的横过来。

好了来看看区分横屏竖屏的css：

@media screen and (orientation: portrait) {

html{

width : 100% ;

height : 100% ;

background-color: white ;

overflow : hidden;

}

body{

width : 100% ;

height : 100% ;

background-color: red ;

overflow : hidden;

}

#print{

position : absolute ;

background-color: yellow ;

}

}

@media screen and (orientation: landscape) {

html{

width : 100% ;

height : 100% ;

background-color: white ;

}

body{

width : 100% ;

height : 100% ;

background-color: white ;

}

#print{

position : absolute ;

top : 0 ;

left : 0 ;

width : 100% ;

height : 100% ;

background-color: yellow ;

}

}

#print p{

margin: auto ;

margin-top : 20px ;

text-align: center;

}

说白了，是要把print这个div在竖屏模式下横过来，横屏状态下不变。所以在portrait下，没定义它的宽高。会通过下面的js来补。

var width = Width;

var height = Height;

if( width < height ){

(width + " " + height);

$print = $('#print');

$(height);

$(width);

$('top', (height-width)/2 );

$('left', 0-(height-width)/2 );

$('transform' , 'rotate(90deg)');

$('transform-origin' , '50% 50%');

}

在这里我们先取得了屏幕内可用区域的宽高，然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏，就把print这个div的宽高设置下，对齐，

然后旋转。

最终效果如下：

竖屏

横屏

最后，这么做带来的后果是，如果用户手机的旋转屏幕按钮开着，那么当手机横过来之后，会造成一定的悲剧。解决办法如下:

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

ntListener(evt, function() {

(evt);

var width = Width;

var height = Height;

$print = $('#print');

if( width > height ){

$(width);

$(height);

$('top', 0 );

$('left', 0 );

$('transform' , 'none');

$('transform-origin' , '50% 50%');

}

else{

$(height);

$(width);

$('top', (height-width)/2 );

$('left', 0-(height-width)/2 );

$('transform' , 'rotate(90deg)');

$('transform-origin' , '50% 50%');

}

}, false);