Css实现手机端页面强制横屏的方法示例

  发布时间:2019-03-20 15:54:12   作者:Noliebe   我要评论

这篇文章主要介绍了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;
    }
}

结构
 

<html>
    <body>
        <div id="gyroContain">
            非常多非常多的文字
        </div>
    </body>
</html>

P.S. 如果你的页面里有from表单要填的话,应该用 「弹出遮罩层让用户旋转手机」 的解决方案。检测手机竖屏下,提示用关闭屏幕旋转锁定,并横置手机。想想手机浏览器还是竖屏,而内容却被强制横屏的画面有多奇怪吧...

P.S. 页面强制横屏是一碗都快放坏了的冷饭。但文主百度到的解决方法都用了js。文主觉得有些高炮打蚊子。所以自己用Css+Html实现了一个。文章内的代码只是一个给大家发散思维的littleDemo,你们想竖屏滚动就去掉height加y-auto, 想有背?#21543;?#23601;加bg-color,还望大家不要讨伐我的不严谨啊。第一篇文章,望海涵。

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

相关文章

  • CSS使用placeholder-shown伪类实现输入框浮动文?#20013;?#26524;

    这篇文章主要介绍了CSS使用placeholder-shown伪类实现输入框浮动文?#20013;?#26524;,需要的朋友可以参考下
    2019-06-12
  • css 权重值(层叠性)实例详解

    这篇文章主要介绍了css 权重值(层叠性)实例详解 ,需要的朋友可以参考下
    2019-06-11
  • 如何反转CSS中的贝塞尔曲线的实现方法

    这篇文章主要介绍了如何反转CSS中的贝塞尔曲线的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一
    2019-06-10
  • CSS揭秘之多重边框的实现

    这篇文章主要介绍了CSS揭秘之多重边框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-10
  • CSS Sticky Footer 几种实现方式

    这篇文章主要介绍了CSS Sticky Footer 几种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2019-06-05
  • CSS八等分圆的实现示例

    这篇文章主要介绍了CSS八等分圆的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-05
  • CSS开关按钮样式详解

    这篇文章主要介绍了CSS开关按钮样式,本文给大家带来三种样式,通过实例代码给大家介绍的非常下关系,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-04
  • css等高布局常用几种方式

    这篇文章主要介绍了css等高布局常用几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-03
  • CSS 类名的问题详解

    这篇文章主要介绍了CSS 类名的问题,需要的朋友可以参考下
    2019-05-29
  • css实现网页栏目左侧固定当滚动到底部时自动调整位置

    这篇文章主要介绍了css实现网页栏目左侧固定当滚动到底部时自动调整位置 ,需要的朋友可以参考下
    2019-05-29

最新评论

时时彩包赢公式0369