Flutter Web中如何强制设置浏览器窗口最小尺寸？

Flutter Web本身没有原生API限制浏览器窗口最小尺寸，但可以通过dart:html直接操作浏览器window对象结合事件监听实现需求，以下是两种可行方案：

方案一：监听窗口resize事件直接处理 #

通过window.onResize监听窗口尺寸变化，当尺寸小于设定最小值时，调用resizeTo强制恢复到最小尺寸：

import 'dart:html';

void setupMinWindowConstraints() {
  const targetMinWidth = 800;
  const targetMinHeight = 600;

  // 页面加载时先检查一次尺寸
  _enforceMinSize(targetMinWidth, targetMinHeight);

  // 监听窗口尺寸变化事件
  window.onResize.listen((_) => _enforceMinSize(targetMinWidth, targetMinHeight));
}

void _enforceMinSize(int minWidth, int minHeight) {
  final currentWidth = window.innerWidth;
  final currentHeight = window.innerHeight;

  if (currentWidth < minWidth || currentHeight < minHeight) {
    window.resizeTo(
      currentWidth < minWidth ? minWidth : currentWidth,
      currentHeight < minHeight ? minHeight : currentHeight,
    );
  }
}

调用时机：可在Flutter组件的initState方法中执行setupMinWindowConstraints()，确保页面加载后立即生效。

方案二：用ResizeObserver监听根元素尺寸 #

ResizeObserver用于监听DOM元素尺寸变化，无法直接监听窗口，但可以监听页面根元素document.documentElement间接获取窗口尺寸变化：

import 'dart:html';

void setupResizeObserverForMinSize() {
  const minWidth = 800;
  const minHeight = 600;

  final resizeObserver = ResizeObserver((entries) {
    for (final entry in entries) {
      final elementWidth = entry.contentRect.width;
      final elementHeight = entry.contentRect.height;

      if (elementWidth < minWidth || elementHeight < minHeight) {
        window.resizeTo(
          elementWidth < minWidth ? minWidth : elementWidth,
          elementHeight < minHeight ? minHeight : elementHeight,
        );
      }
    }
  });

  // 监听页面根元素，其尺寸变化对应窗口尺寸变化
  resizeObserver.observe(document.documentElement);
}

注意事项 #

• 部分现代浏览器出于安全和用户体验考虑，会限制resizeTo方法的调用，比如需要用户主动交互（如点击页面元素）后才能生效，或在无痕模式下禁用该方法。
• 若Flutter Web应用嵌入在iframe中，resizeTo可能无法生效，取决于父页面的配置。

内容的提问来源于stack exchange，提问作者agustin bossi