Question

我正在开发一款既可在台式机也可在移动设备上玩的网络游戏。在移动设备上播放要求用户以横向模式播放。

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

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

这有默认情况下显示图像的问题。如果手机处于横向模式，则用户必须将其旋转至纵向模式，然后再次返回。更糟糕的是，默认情况下，它还会在桌面浏览器上显示，并且无法旋转它。但是，代码确实可以正常工作，但是以正确的方向旋转时隐藏了图像。

所以替代方法是将其默认设置为display: none，对吧？

问题在于它永远不会显示。似乎一旦设置为display: none，它就会忽略每次更改它的尝试。

有什么我可以解决的吗？另外，有没有更好的方法来实现这个想法？

编辑：

这是我的HTML文件：

<script>
    window.addEventListener('resize', onSizeChange);
</script>

这是我的功能：

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';
        }
    }
}

Answer 1

您可以使用 orientation media feature 隐藏和显示基于设备方向的相关元素。默认情况下，您需要隐藏该元素，并纵向 show 该元素。由于 specificity 增加，该元素将重新显示在纵向设备中。

#rotateWarning {
  display: none;
}

@media only screen and (orientation: portrait) {
  #rotateWarning {
    display: block;
  }
}

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

设置为“无”时，HTML图像显示设置为“以后不显示”

1 个答案: