css3 横屏-CSS如何实现手机页面强制横屏示例

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

风格

@media screen and (orientation: portrait) {
    html{
        width : 100vmin;
        height : 100vmax;
    }
    body{
        width : 100vmin;
        height : 100vmax;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    }
  }
@media screen and (orientation: landscape) {
    html{
        width : 100vmax;
        height : 100vmin;
    }
    body{
        width : 100vmax;
        height : 100vmin;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
    }
}

结构

    
        

            非常多非常多的文字
        
    

PS 如果你的页面上有一个表单需要填写，你应该使用“弹出描边图层让用户旋转手机”的解决方案。 检查手机竖屏，提示关闭屏幕旋转锁css3 横屏，将手机横放。 想想，手机浏览器还是竖屏，内容却强制横屏，这是多么奇怪的事情……

PS页面的强制横屏，简直就是一顿快坏掉的冷餐。 但笔者百度找到的解决方案都是使用js。 笔者认为css3 横屏，有些高射炮打虫子。 所以我用Css+Html实现了一个。 文章中的代码只是一个小小的Demo，供大家发散思维。 如果你想垂直滚动，你可以删除高度并添加 y-auto，如果你想有背景颜色，请添加 bg-color。 希望你不要因为我不严谨而杀了我。 第一篇，王海涵。

以上就是本文的全部内容。 希望对您的学习有所帮助，也希望您多多支持脚本之家。