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

最新推荐文章于 2025-03-11 13:00:47 发布

Victor jiang

最新推荐文章于 2025-03-11 13:00:47 发布

阅读量1.1w

点赞数 5

文章标签：前端开发

本文链接：https://blog.csdn.net/weixin_41190571/article/details/80774474

版权

本文介绍如何通过CSS媒体查询及transform属性实现手机网页在竖屏状态下ECharts图表的横屏显示，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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