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,还望大家不要讨伐我的不严谨啊。第一篇文章,望海涵。

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

    相关文章

    • 4种灵活的Scss编译输出风格整理

      这篇文章主要介绍了Scss编译输出风格整理的相关资?#24076;琒css提供了4种风格输出CSS,以满足更多人的需求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编
      2019-03-29
    • Css实现手机端页面强制横屏的方法示例

      这篇文章主要介绍了Css实现手机端页面强制横屏的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
      2019-03-20
    • 深入理解CSS @font-face性能优化

      这篇文章主要介绍了深入理解CSS @font-face性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-03-06
    • 用CSS画一个带阴影的三角形的示例代码

      这篇文章主要介绍了用CSS画一个带阴影的三角形的示例代码的相关资?#24076;?#25991;中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随
      2019-03-04
    • 使用CSS的border属性绘制各种几何形状的方法

      这篇文章主要介绍了使用CSS的border属性绘制各种几何形状的方法的相关资?#24076;?#25991;中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们
      2019-03-01
    • css实现?#35745;?#33258;适应容器的示例代码

      这篇文章主要介绍了css实现?#35745;?#33258;适应容器的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
      2019-02-27
    • 详解CSS外边距折叠引发的问题

      这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资?#24076;?#23567;编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-02-27
    • 关于CSS引入方式的详细见解小结

      这篇文章主要介绍了关于CSS引入方式的详细见解小结的相关资?#24076;?#23567;编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-02-25
    • 用纯CSS实现镂空效果的示例代码

      这篇文章主要介绍了用纯CSS实现镂空效果的示例代码的相关资?#24076;?#23567;编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2019-02-25
    • css 11种方法实现一个tips带有描边的小箭头

      这篇文章主要介绍了css 11种方法实现一个tips带有描边的小箭头,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编
      2019-02-21

    最新评论

    山东群英会开奖查询