HTML图像显示设置为none later won'；设置为阻止时不显示

我正在开发一款可以在桌面和手机上玩的网络游戏。在移动设备上播放需要用户以横向模式播放

我通过宽度和高度对设备方向做了一个简单的检查，我应该显示一个图像，告诉玩家旋转设备。因此，我将其添加到html文件中：

<div id="rotateWarning"><img src="res/plsRotate.png" style="width: 100%; height: auto;"></div>

这是我的功能：

function onSizeChange() {
    if (getMobileOperatingSystem) {
        if (window.outerHeight > window.outerWidth) {
            document.getElementById('rotateWarning').style.display = 'block';
            document.getElementById('logInPages').style.display = 'none';
        } else {
            console.log("Landscape!");
            document.getElementById('rotateWarning').style.display = 'none';
            document.getElementById('logInPages').style.display = 'block';
        }
    }
}

---

您可以使用根据设备的方向隐藏和显示相关元素。默认情况下，您需要隐藏该元素，并显示该元素的纵向方向。由于增加了，纵向设备将重新显示该元素

#旋转旋转{
显示：无；
}
@仅媒体屏幕和（方向：纵向）{
#轮换{
显示：块；
}
}

当您将其设置为“显示：无”时，在发生轮换时，您会尝试进行哪些更改？假设您只针对“现代”浏览器，可能是更好的方法。也有基于DOM的API可用：设置

display:block

最好能正常工作。请向我们显示您试图将其设置为

块的代码。也许您没有选择正确的DOMelement@SaurabhTiwari我已经更新了问题。@ChrisCousins我已经更新了问题。我将尝试一下，谢谢，这似乎是一个更“现代”的解决方案。“方向：肖像”是如何工作的？我之所以选择大小而不是方向，是因为有些设备默认是横向的；在JavaScript中，方向只会得到角度，这会破坏逻辑。答案中的链接提供了有关
方向的非常好的信息。这个链接有什么不清楚的地方吗？@JonP我最近在三星Galaxy Tab S上测试了它。在横向模式下，它确实显示了用于纵向模式的警告图像（为了更好的测量，也记录了）。我们似乎回到了原点，尽管这个答案的其余逻辑是适用的。
function onSizeChange() {
    if (getMobileOperatingSystem) {
        if (window.outerHeight > window.outerWidth) {
            document.getElementById('rotateWarning').style.display = 'block';
            document.getElementById('logInPages').style.display = 'none';
        } else {
            console.log("Landscape!");
            document.getElementById('rotateWarning').style.display = 'none';
            document.getElementById('logInPages').style.display = 'block';
        }
    }
}