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

markus_ja 发表于 Dev

markus_ja

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

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

如果浏览器处于纵向位置，我想旋转表格（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;

约恩·E·安格特维特

The simplest way would be to use the main form's With and Height.

Create a new "Visual project" and add an EditBox to the form.
Put this code into the "Resize" method:

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

If you, however, want to keep the main-form at a fixed size, you would need to read some other properties.

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

There are several ways to get these dimensions. Both the "window" and "document" DOM-element have some properties you can use:

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

In Smart you can access these from the Application object:
(Add two more edit-boxes...)

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

It seems to be a bug in Application.Document.ClientHeight as it always returns 0...

请记住，正在运行的代码是JavaScript。您可以在网上找到许多有用的信息。
通过一个asm部分将这些JS代码片段转换为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对象，并启用“后期绑定”对象的成员-ish访问：

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;

上面的代码片段的屏幕截图：

在此处输入图片说明