Css完成手机上端网页页面强制性横屏的方式示例

日期：2021-01-20 类型：科技新闻 

关键词：网站建设，创建网站，免费建站平台，智能建站，企业建网站

款式

@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,⑴00vmin);
    }
  }
@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. 网页页面强制性横屏是1碗都快放坏了的冷饭。但文主百度搜索到的处理方式都用了js。文主感觉一些高炮打蚊子。因此自身用Css+Html完成了1个。文章内容内的编码只是1个给大伙儿发散逻辑思维的littleDemo，你们想竖屏翻转就去掉height加y-auto, 想有情况色就加bg-color，还望大伙儿不必征讨我的不认真细致啊。第1篇文章内容，望海涵。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：css3 给情况设定渐变色色的方式 返回下一篇：没有了