2020-02-24 移动端如何让页面强制横屏(微信端内强制横屏

作者: 追寻1989 | 来源:发表于2020-02-24 15:55 被阅读0次

2020-02-24 移动端如何让页面强制横屏(微信端内强制横屏
移动端如何让页面强制横屏
移动端如何让页面强制横屏
H5页面自动适应横竖屏
移动端布局常见问题
iOS 强制横屏和竖屏
移动端横屏提示插件
横竖屏
横屏竖屏切换
移动端开发-禁止横屏

最近开发微信公众号的时候遇到一个需求，就是在手机页面上有许多许多ECharts图形展示。
为了更好的用户体验，当用户竖屏打开时我们需要将手机页面的内容横过来，效果如下所示：

竖屏状态

横屏状态

好了，现在我的项目中html结构如下：

<body>
       <div id="main"></div>     //这是我的画布
</body>

我们利用transform将这个父容器在竖屏状态下整体顺时针旋转90º，这样就得到了一个横屏的状态。但是还不够，因为旋转元素的基点默认为本身的中心点。所以我们需要设置一下它的旋转中心为左上角，即transform-origin: 0% 0%；这样的话页面被“转出了屏幕”停留在屏幕的左侧，最后一步只需要将它往右平移一个屏幕的宽度就刚刚好（left：100vw）。请看示意图：

image.png

完整代码如下：

<style type="text/css">
    body{
              position:fixed;       //将body铺满整个屏幕
              width: 100%;
              height: 100%;
              padding: 0;
              margin: 0;
              background-color:rgb(51, 51, 51);
              overflow: hidden;
      }
      #main{    //注意这里：初始时候我们需要将这个div的长宽给设置一下（ps：宽度要大于高度）
                  width:560px;
                  height:320px;
       }
       @media screen and (orientation: portrait){     //竖屏状态下
                    #main{  
                                position:absolute;
                                width: 100vh;
                                height: 100vw;
                                top: 0;
                                left: 100vw;
                                -webkit-transform:rotate(90deg);
                                -moz-transform: rotate(90deg);
                                -ms-transform: rotate(90deg);
                                 transform:rotate(90deg);
                                 transform-origin: 0% 0%;
                                 }  
          }
          @media screen and (orientation: landscape) {        //横屏状态下
                    #main {
                                position:absolute;
                                top:0;
                                left:0;
                                width: 100vw;
                                height: 100vh;
                                }
            }
</style>