如何在Delphi TMS Web Core网站中获取用户浏览器窗口大小？

直接获取当前窗口尺寸 #

在TMS Web Core中，你可以通过封装的TJSWindow对象直接访问浏览器原生的窗口尺寸属性：

var
  ViewportWidth, ViewportHeight: Integer;
  WindowOuterWidth, WindowOuterHeight: Integer;
begin
  // 获取网页可视区域尺寸（不含浏览器工具栏、边框）
  ViewportWidth := TJSWindow(window).innerWidth;
  ViewportHeight := TJSWindow(window).innerHeight;

  // 获取整个浏览器窗口的外部尺寸（含边框、标题栏，兼容性视浏览器而定）
  WindowOuterWidth := TJSWindow(window).outerWidth;
  WindowOuterHeight := TJSWindow(window).outerHeight;
end;

监听窗口尺寸变化 #

如果需要在用户调整窗口大小时实时获取尺寸，可以绑定浏览器的resize事件：

procedure TMainForm.WebFormCreate(Sender: TObject);
begin
  // 绑定窗口 resize 事件
  TJSWindow(window).addEventListener('resize', @HandleWindowResize);
end;

procedure TMainForm.HandleWindowResize(Event: TEvent);
var
  NewWidth, NewHeight: Integer;
begin
  NewWidth := TJSWindow(window).innerWidth;
  NewHeight := TJSWindow(window).innerHeight;
  // 此处添加尺寸变化后的业务逻辑，比如更新UI显示
  lblWindowSize.Caption := Format('当前视口：%d × %d', [NewWidth, NewHeight]);
end;

procedure TMainForm.WebFormDestroy(Sender: TObject);
begin
  // 销毁前移除事件监听，避免内存泄漏
  TJSWindow(window).removeEventListener('resize', @HandleWindowResize);
end;

关键注意点 #

• 优先使用innerWidth/innerHeight：这两个属性返回网页实际可显示区域的尺寸，是大多数业务场景的需求。
• outerWidth/outerHeight兼容性有限：部分移动端浏览器或特殊环境下，该属性可能无法返回预期值。
• 确保代码执行时机：建议在WebFormCreate事件或后续初始化逻辑中调用，避免窗口对象未就绪时访问属性。

内容的提问来源于stack exchange，提问作者Shaun Roselt