uniapp h5 onwindowresize ios不生效是什么原因

我在uniapp开发的H5页面中使用了onwindowresize事件监听窗口大小变化，但在iOS设备上发现不生效。其他浏览器和安卓设备都能正常触发，只有iOS不行。有人遇到过类似的问题吗？是什么原因导致的？

2 回复

iOS中onWindowResize不生效，可能是因为iOS Safari对窗口大小变化事件支持不完善。建议改用window.addEventListener('resize', callback)，或使用uni.onWindowResize监听。


在UniApp H5中，onWindowResize 事件在iOS设备上不生效，通常是由于以下原因及解决方案：

主要原因

  1. iOS Safari 限制：iOS Safari 对 resize 事件有严格限制，仅在窗口实际改变时触发（如旋转设备），而手动调整浏览器窗口大小不会触发。
  2. UniApp 实现机制：UniApp 在H5端可能未完全模拟原生 window.resize 事件，导致在iOS上兼容性问题。
  3. 事件绑定时机：如果事件绑定过早或过晚，可能导致监听失败。

解决方案

  1. 使用 window.addEventListener 直接监听：

    • 在 onLoad 或 mounted 生命周期中绑定事件，确保DOM已加载。
    • 示例代码：
      export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      console.log('窗口大小改变', window.innerWidth, window.innerHeight);
      // 添加自定义逻辑，如更新数据或调用方法
    }
  }
};

  2. 结合 onOrientationChange 事件：

    • 对于设备旋转，可额外监听方向变化事件。
    • 示例代码：
      mounted() {
  window.addEventListener('orientationchange', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('orientationchange', this.handleResize);
}

  3. 使用 UniApp 的 onResize 页面生命周期：

    • 在 pages.json 中配置页面支持 onResize（仅部分平台支持，需测试）。
    • 示例代码：
      export default {
  onResize() {
    console.log('页面大小改变');
  }
};

  4. 手动触发检测：

    • 在需要时通过定时器或用户交互触发尺寸检查（不推荐，仅作备选）。

注意事项

  • 测试兼容性：在真机iOS Safari 上测试，确保事件正常触发。
  • 移除监听器：避免内存泄漏，在页面销毁时移除事件监听。
  • 替代方案：如果以上方法无效，考虑使用 CSS 媒体查询或 JavaScript 定期检查窗口尺寸。

通过以上方法，通常可以解决iOS上 onWindowResize 不生效的问题。如果仍无效，检查UniApp版本或考虑提交问题到官方社区。

回到顶部