2

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

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

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

1 回答 1

1

最简单的方法是使用主窗体的Withand Height。

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

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

但是，如果您想将主窗体保持在固定大小，则需要阅读其他一些属性。

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

有几种方法可以获得这些尺寸。“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。你可以在网上找到很多有用的信息。通过一个部分
将这些 JS 片段转换为 Smart Pascal 非常容易。asm

例如：

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;

上面代码片段的截图：

在此处输入图像描述

于 2014-07-26T13:37:24.483 回答