如何获取可见浏览器区域的高度和宽度

Question

如何检索浏览器区域的高度和宽度？

无论手机是否已旋转浏览器视图，我都希望始终以横向模式显示一个表单。

如果浏览器处于纵向位置，我想旋转表单（TForm.Angel：= 90）。为了强制横向模式。

更新：
这是一张图片，结果如何：

我找到了一个解决方案，但我并不是很满意。旋转视图很容易，但原点不在中心，所以我必须手动修正它，我不明白为什么需要进行这种转换。
这是代码：

procedure TForm1.ForceLandscape(aEnabled: Boolean);
var
  browserWidth, browserHeight: Integer;
  isLandscapeMode: Boolean;
begin
  browserHeight := Application.Display.ClientHeight;  //BrowserAPI.Window.innerHeight;
  browserWidth := Application.Display.ClientWidth;    //BrowserAPI.Window.innerWidth;

  isLandscapeMode := browserHeight > browserWidth;

  if aEnabled and isLandscapeMode then
  begin
    Angle := 90;

    Height := browserWidth;
    Width := browserHeight;
  end
  else
  begin
    Angle := 0;

    Height := browserHeight;
    Width := browserWidth;
  end;
end;

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components

  //Need to put a transform.orign for form rotation (Angle)
  var x := trunc(Application.Display.ClientWidth / 2);
  var myStyle := TInteger.ToPxStr(x) + ' ' + TInteger.ToPxStr(x);
  w3_setStyle(Handle, w3_CSSPrefix('TransformOrigin'), myStyle);

end;

Answer 1

最简单的方法是使用主要表单With和Height。

创建一个新的“Visual项目”并将EditBox添加到表单中 将此代码放入“调整大小”方法：

Edit1.Text := Format('%d x %d', [Self.Width, Self.Height]);

---

但是，如果您希望将主表单保持为固定大小，则需要阅读其他一些属性。

Self.Width := 250;
Self.Height := 250;

有several ways to get these dimensions。 “window”和“document”DOM元素都有一些你可以使用的属性：

• window.innerWidth
• document.documentElement.clientWidth
• document.body.clientWidth

在Smart中，您可以从Application对象访问这些：
（再添加两个编辑框......）

W3EditBox2.Text := Format('%d x %d', [Application.Document.ClientWidth, Application.Document.ClientHeight]);
W3EditBox3.Text := Format('%d x %d', [Application.Display.ClientWidth, Application.Display.ClientHeight]);

这似乎是Application.Document.ClientHeight中的错误，因为它始终返回0 ...

---

请记住，正在运行的代码是JavaScript。您可以在网上找到许多有用的信息 通过asm部分将这些JS-snippets转换为Smart Pascal非常容易。

例如：

var
  w,h: Integer;
begin

  //Pure JavaScript below.
  //The @-prefix maps the variable to a SmartPascal declared variable

  asm 
    @w = window.innerWidth;
    @h = window.innerHeight;
  end;

  W3EditBox4.Text := Format('%d x %d', [w, h]);

end; 

---

另一个技巧是声明一个Variant变量 Variant变量可以包含整个JavaScript对象，并启用“后期绑定” - 对对象成员的访问：

var  
  v: Variant;
begin

  //Grab the whole "document" element from the DOM
  asm
    @v = document;
  end;

  //Access all "document" members directly via the "v"-variable 
  W3EditBox5.Text := Format('%d x %d', [v.documentElement.clientWidth, v.documentElement.clientHeight]);

end;

---

上面代码段的屏幕截图：