说起来html页面强制横屏,最多的都是js实现html页面强制横屏,用css实现这个功能的,很少人知道,那么今天就谈一谈如何用CSS实现html页面横屏显示,无论用户怎么旋转手机都是横屏!!!

CSS实现Html页面强制横屏-Qui-Note

场景分析:

强制横屏,一般用于手机端游戏界面,或者横屏设备,给人一种大屏沉浸式的感觉,视觉冲击高于竖屏布局!

原理分析:

CSS实现html页面横屏,必须要通过orientation属性进行判断,无非两种结果,竖屏和横屏,横屏还好直接兼容,然后就是竖屏,我们只需要判断出来,通过css3的transform:rotate(90deg); 就可以了!

orientation介绍

orientation CSS 描述符控制由@viewport定义文档的方向。

orientation: portrait;/*纵向*/
orientation: landscape;/* 横向*/

orientation用法:

@media screen and (orientation: portrait) {
/*竖屏判断*/
}
@media screen and (orientation: portrait) {
/*横屏判断*/
}

功能实现:
css:

body {
position: fixed;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
} 
@media screen and (orientation: portrait) {
.wrap {
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%;
   }
}
@media screen and (orientation: landscape) {
.wrap {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
  }
}

html:

<section class="wrap">CSS实现html页面横屏,必须要通过orientation属性进行判断,无非两种结果,竖屏和横屏,横屏还好直接兼容,然后就是竖屏,我们只需要判断出来,通过css3的transform:rotate(90deg); 就可以了</section>

最终效果:

CSS实现Html页面强制横屏-Qui-Note

这样就实现了 一直横屏排版布局的效果,就这样完事了?别急,我还有话说!

orientation兼容性:

由于这个属性多用于移动端H5页面,就针对H5移动端说一下,改属性对ios设备和欧朋浏览器不支持,其余的都可以大胆使用!由于没有ios手机,真机也没得测试,如果真实开发用到,请考虑ios设备!!!
CSS实现Html页面强制横屏-Qui-Note