📌  相关文章
📜  设备高度反应本机 - Javascript(1)

📅  最后修改于: 2023-12-03 15:12:07.384000             🧑  作者: Mango

设备高度反应本机 - JavaScript

有时候我们需要根据设备的屏幕高度来调整我们的页面元素和布局。在 JavaScript 中，我们可以通过以下代码来获取屏幕高度：

var screenHeight = window.innerHeight;

然后，我们可以据此来调整我们的页面元素和布局，比如让某个元素居中，或者让某些元素始终占据整个屏幕高度等等。

以下是一个简单的例子，让一个元素垂直居中，并且始终占据整个屏幕高度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #my-element {
        display: flex;
        align-items: center;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="my-element">Hello World!</div>
    <script>
      var screenHeight = window.innerHeight;
      document.getElementById("my-element").style.height = screenHeight + "px";
    </script>
  </body>
</html>

在上述代码中，我们使用了 flex 布局来让 my-element 元素垂直居中，并且使用了 100vh 来让它始终占据整个屏幕高度。然后，在 JavaScript 中，我们获取了屏幕高度并将它设置为 my-element 元素的高度，来实现动态调整页面元素的效果。

以上是一个简单的例子，而在实际开发中，我们可能需要更复杂的布局和调整方案。但是，掌握了 JavaScript 中如何获取设备高度并据此来进行调整的方法，我们就能更方便地完成这些任务。