$(window).resize() 会在方向改变时触发吗？答案

【问题标题】：Will $(window).resize() fire on orientation change?$(window).resize() 会在方向改变时触发吗？
【发布时间】：2021-09-23 01:44:34
【问题描述】：

我在调整浏览器窗口大小时使用它来运行一些代码：$(window).resize(callback)

当手机和平板电脑的方向发生变化时，我还需要运行此代码。上述事件会引发此事件吗？

【问题讨论】：

它会触发。我认为这是一个有用的问题，但它已关闭，所以我无法回答。这是jquery docs的背景：Note that we bind to the browser's resize event when orientationchange is not natively supported or if $.mobile.orientationChangeEnabled is set to false.

标签： javascript jquery screen-orientation

【解决方案1】：

有些设备/浏览器可以，有些则不行。您需要确定您支持的浏览器和设备。

如果您想保持安全，您应该使用调整大小事件并获取/检查其中的大小；如果您知道您想要的设备只需改变方向：

简单的解决方案：

// Listen for orientation changes      
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    alert(window.orientation);
}, false);

更安全/受支持

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

David Walsh 写了一篇关于调整大小和方向更改事件的好文章。更多关于方向变化和尺寸的信息： http://davidwalsh.name/orientation-change

【讨论】：

如果我正确理解了这个问题，则需要两种解决方案，因为如果调整窗口大小或设备方向发生变化，OP 希望运行相同的代码。除非你说香草 JS 调整大小选项比 jQuery 更广泛地支持
如果您决定支持较旧的浏览器，您可以使用更安全的第二个提到的解决方案。您显然需要添加涵盖方向变化的计算逻辑。
如果您使用“更安全/支持”当用户在移动浏览器上放大/缩小时如何处理？每次我缩放时都会触发 Resize 事件
不只是有些人这样做有些人不这样做——而是有些人有时会这样做。即使在带有 ios11 的 iPhone 上，我也看到调整大小甚至在我旋转时并不总是触发。但后来我会滚动，它会更新。两者结合使它总是即时的。只需确保只处理一项更改（仅在与上次运行计算相比确实发生更改时才运行您的代码）而不是两项。

【解决方案2】：

答案是恕我直言：没有

但是：

$(window).on('resize orientationchange', function(){
//do stuff
});

你应该被覆盖

小心，这可能会根据浏览器触发两次

【讨论】：

【解决方案3】：

我的解决方案：

在orientationchange 不执行时生成事件
使用节流阀防止在调整大小时更新太多（例如 lodash 库）

window.addEventListener("resize", throttle(function() {
    //to do when resize
}, 50), false);

window.addEventListener("orientationchange", function() {
    // Generate a resize event if the device doesn't do it
    window.dispatchEvent(new Event("resize"));
}, false);

【讨论】：

问题在于window.dispatchEvent(new Event("resize")) 不会触发通过$(window).resize() 注册的任何处理程序。

【解决方案4】：

Quirksmode 直接测试了这个问题，发现除了 Opera Mini 以外的所有浏览器，在方向改变时触发原生的resize 事件：https://www.quirksmode.org/dom/events/resize_mobile.html

【讨论】：

【解决方案5】：

一个简单的解决方案是根据事件类型传递一个值..

window.addEventListener('resize', function () {
    myFunction('resize');
});

window.addEventListener("orientationchange", function() {
    myFunction('orientation');
});

function myFunction(value) {
    if (value == 'resize') {
       // do something
    } else if (value == 'orientation') {
       // do something else
    }
}

【讨论】：