问题概述
在进行前端页面开发时，我们常常需要对不同分辨率的设备进行响应式设计，以适配不同尺寸的屏幕。然而，在处理移动端 Safari 浏览器时，我们可能会遇到一个奇怪的问题：有些 iPhone 或 iPad 设备会在滚动页面时意外地触发多个 resize 事件。
这种情况通常是由于 iOS 的 Safari 浏览器特性所导致的，在没有正确处理 resize 事件的情况下，可能会影响页面性能和用户体验。
问题原因
当用户在 iPhone 或 iPad 上使用 Safari 浏览器滚动页面时，设备会根据滚动速度和方向动态调整浏览器地址栏（也称为导航条）的高度。由于地址栏的高度变化，Safari 浏览器会认为窗口大小发生了变化，从而触发 resize 事件。
这种情况下，如果页面代码中存在未优化的 resize 事件处理函数，就会导致这些函数被频繁调用，影响页面的性能和用户体验。
解决方法
解决这个问题的方法其实很简单：在处理 resize 事件时，我们需要判断浏览器地址栏是否处于隐藏状态。如果地址栏处于隐藏状态，就可以忽略该 resize 事件。
--- --------- - ------------------
--- ---------- - -------------------
-------- -------------- -
-- ------------------ --- --------- -- ------------------ --- ----------- -
-- ------------- ------ --
-------
-
--------- - ------------------
---------- - -------------------
-- ----- ------ --
-- ---
-
--------------------------------- --------------在上面的示例代码中，我们使用了 lastWidth 和 lastHeight 变量来存储上一次窗口大小。在处理 resize 事件时，我们首先判断当前窗口大小是否等于上一次记录的大小。如果是，则表示这个 resize 事件是由地址栏高度变化引起的，可以直接忽略；否则我们需要更新记录的窗口大小，并执行正常的 resize 处理逻辑。
结论
iPhone/iPad 触发意外的 resize 事件，是由 Safari 浏览器特性所导致的。为了避免影响页面性能和用户体验，我们需要在处理 resize 事件时，判断浏览器地址栏是否处于隐藏状态，并做出相应的处理。
虽然这个问题看起来比较小，但它也提醒我们，要在开发过程中关注浏览器的特性和行为，以确保代码的正确性和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26193