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

    最新评论

    山东群英会开奖查询
      1. 香港黄金一诗两码中特 重庆时时彩开奖视频下载 广东体育彩票官网 一肖中特准马会香港 买三连肖中两肖算中吗 北京快中彩走势 百家乐怎么 彩票大奖得主家破人亡 公开一波中特会员料 全年固定出特公式规律围攻法 七乐彩复式规则 大乐透走势图双色球 黄大仙码报今天晚上买什么平特一肖 中国福彩网100块钱充值卡 梭哈游戏下载