How to get the height and width of the visible browser area - smart-mobile-studio

Question

How can I retrieve the height and width of the browser area?
I want to show one form always in landscape mode, regardless whether the mobile phone has rotated the browser view.
if the browser is in portrait postion I want to rotate the form (TForm.Angel := 90). In order to force landscape mode.
Update:
Here is a picture, how the result should look like:
I found a solution, but I am not so really happy with it. It's easy to rotate the view, but the origin is not in the center, so I have to manually correct it, and I don't understand why this transformation is neccessary.
Here is the code:
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

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...
Remember that the running code is JavaScript. You can find lots of useful information on the web.
It's very easy to transform these JS-snippets into Smart Pascal via an asm section.
Eg:
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;
Another trick would be to declare a Variant variable.
A Variant variable can hold a whole JavaScript object, and enable "late binding"-ish access to the members of the object:
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;
Screenshot of the code-snippets above: