在响应式设计中，我们常常需要根据屏幕尺寸来动态调整页面布局。为此，绑定 $(window).resize() 事件是十分常见的做法。但是当用户在移动设备上旋转屏幕时，$(window).resize() 事件是否会被触发呢？本文将通过深入探究 $(window).resize() 事件和屏幕旋转事件的异同点，给出明确的答案。
$(window).resize() 事件与屏幕旋转事件的区别
$(window).resize() 事件是当浏览器窗口尺寸发生变化时触发的事件。而屏幕旋转事件则是当移动设备由横屏模式切换到竖屏模式或者反之时触发的事件。虽然这两个事件都与视口尺寸相关，但是它们背后的机制却有所不同。
具体来说，当用户旋转屏幕时，设备实际上是改变了视口的尺寸，从而导致页面的重新渲染。但是浏览器窗口的尺寸并没有发生变化，因此 $(window).resize() 事件并不会被触发。
如何在屏幕旋转时触发事件
如果我们需要在屏幕旋转时触发某个事件，那么有几种可行的方案。
使用 orientationchange 事件
orientationchange 是一种专门用于监听移动设备屏幕旋转事件的事件。它与 $(window).resize() 事件类似，但是只在屏幕旋转时触发。
以下是一个示例代码：
$(window).on('orientationchange', function() {
console.log('Orientation changed!');
});监听 window.matchMedia() 的变化
window.matchMedia() 方法可以返回一个布尔值，指示文档是否匹配给定的媒体查询。我们可以通过监听这个方法的返回值来判断屏幕旋转事件是否发生。
以下是一个示例代码：
-- -------------------- ---- -------
--- -------------- - -------------------------------- ------------
-------- ------------------------------ -
-- --------------- -
-------------------- -- -------- -------
- ---- -
-------------------- -- --------- -------
-
-
----------------------------------------------------总结
绑定 $(window).resize() 事件可以监听浏览器窗口尺寸变化，但是并不能监听移动设备屏幕旋转事件。如果我们需要在屏幕旋转时触发某个事件，可以使用 orientationchange 事件或者监听 window.matchMedia() 的变化。希望本文能够帮助您更好地理解和使用这两个事件，从而提升前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31137