css强制横屏显示源码

随着移动设备的普及，为了提升用户体验，越来越多的网站需要在移动端支持横屏模式。而对于一些特定的网页应用来说，开启强制横屏模式可以更好地展示内容。那么如何使用CSS强制横屏显示呢？下面给出一段简单的代码示例：

@media screen and (orientation:portrait){
    html,body{
        transform:rotate(90deg);
        transform-origin:50% 50%;
        width:100vh;
        height:100vw;
        overflow-x:hidden;
        position:absolute;
        top:100%;
        left:0;
    }
}

首先，我们使用@media媒体查询检测当前设备是否处于纵向（portrait）模式下。当设备处于纵向模式时，我们将html和body标签进行旋转操作，将页面旋转90度。其中，transform-origin属性用于设置旋转原点，即页面中心点位置。width和height属性分别设置页面的宽度和高度为100vh和100vw，以保持整个页面在可视区域内。同时，使用overflow-x:hidden属性设置水平滚动条不可见，使页面在横向模式下更加美观。position:absolute和top、left属性用于将旋转后的页面相对于视窗向上偏移100%，以调整页面可视区域。这样，我们就轻松实现了强制横屏显示的效果。