移动端如何让页面强制横屏

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

      

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

2.        
        //这是我的画布

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

完整代码如下：

感谢阅读！如有遗漏之处欢迎指正。