移动端旋转90deg后，如何让战舰游戏Div占满全屏？

你的问题出在**transform: rotate()仅改变视觉呈现，不会修改元素的布局盒模型**。旋转后游戏元素的实际占位还是原来的宽高（100vw×100vh），但视觉上变成了100vh×100vw，导致显示不全。以下是修复方案：

修改后的完整代码 #

HTML（无需改动） #

<body>
    <div id="game"></div>
</body>

CSS #

body{
    width: 100vw;
    height: 100vh;
    background-color: var(--darkBackground);
    font-family: var(--fontFamily);
    margin: 0; /* 移除浏览器默认边距 */
    overflow: hidden; /* 防止旋转后出现滚动条 */
}

#game{
    width: 100vw;
    height: 100vh;
    background: rgba(50, 50, 50, 0.4);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 420px){
    #game{
        position: absolute;
        top: 0;
        left: 0;
        width: 100vh;
        height: 100vw;
        /* 以左上角为旋转原点，旋转后平移修正位置 */
        transform: rotate(90deg) translate(0, -100%);
        transform-origin: top left;
    }
}

关键调整说明 #

• 给body添加margin: 0和overflow: hidden：移除浏览器默认边距，避免旋转后出现横向/纵向滚动条。
• 将#game改为绝对定位：脱离文档流，方便通过transform调整位置。
• 设置transform-origin: top left：把旋转原点设为元素左上角，让旋转后的位置更容易计算。
• 增加translate(0, -100%)：旋转90度后，元素会向上超出视口，通过向下平移自身高度（100vw），让整个元素刚好填满视口。

内容的提问来源于stack exchange，提问作者Yura Shtefanko