手机端页面强制横屏

某个手机端页面需要显示报表 报表需要强制横屏展示（通过css样式媒体查询判断旋转布局）
代码如下

<div id="screen">
	<div id="main">强制横屏
		 <div class="top"></div>
	</div>
</div>
#screen {
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color:rgb(228, 180, 180);
	overflow: hidden
}


@media screen and (orientation: portrait) {
	/*竖屏*/
	#main {
		position: absolute;
		width: 100vh;
		height: 100vw;
		top: 0;
		left: 100vw;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
		transform-origin: 0% 0%;
		border: 1px solid red;
		background: yellow;
	}
	.top{
		width: 100%;
		height: 60px;
		background: red;
	}
}

@media screen and (orientation: landscape) {
	/*手机开启横屏*/
	#main  {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		border: 1px solid red;
		background:deepskyblue;
		
	}
	.top{
		width: 100%;
		height: 60px;
		background: lightskyblue;
	}
}