<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. 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

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>