如何在窗口旋转时执行 JavaScript Code

在窗口旋转时执行 JavaScript Code 是一个常见的需求，特别是在移动设备上。在这篇文章中，我将介绍如何使用 CSS3 Media Queries 和 JavaScript 来实现这一目标。

使用 CSS3 Media Queries

CSS3 Media Queries 可以根据屏幕的大小和方向来改变样式，从而实现在窗口旋转时执行 JavaScript Code 的效果。以下是示例代码：

@media (orientation: landscape) {
  /* 在横向方向执行 JavaScript Code */
}

@media (orientation: portrait) {
  /* 在纵向方向执行 JavaScript Code */
}

在这里，我们使用 @media 媒体查询选择器，然后指定屏幕方向来执行 JavaScript Code。我们可以在对应的 CSS 样式中添加 JavaScript Code，或者使用 script 标签在文档中嵌入 JavaScript Code。

使用 JavaScript 监听窗口旋转事件

另一种方法是使用 JavaScript 来监听窗口旋转事件，并在事件触发时执行 JavaScript Code。以下是示例代码：

window.addEventListener("orientationchange", function() {
  if (window.orientation == 90 || window.orientation == -90) {
    /* 在横向方向执行 JavaScript Code */
  } else {
    /* 在纵向方向执行 JavaScript Code */
  }
});

在这里，我们使用 addEventListener 方法来监听 orientationchange 事件，当窗口旋转时，该事件将被触发。我们可以使用 window.orientation 属性来获取当前屏幕方向，然后根据方向来执行 JavaScript Code。

总结

以上是如何在窗口旋转时执行 JavaScript Code 的两种方法，你可以根据你的需求选择其中之一。如果你需要根据屏幕方向来控制网页布局或者执行脚本，那么 CSS3 Media Queries 可能是更好的选择。如果你需要动态地响应窗口旋转事件，那么 JavaScript 监听器则是更好的选择。