Zooming In or Out

Sometimes the dimensions of the browser present a challenge.

Some examples are:

• 4K or 8K TV screens displaying very high resolutions in public displays
• 5 or 7 inch screens on embedded systems, which have high resolutions but are not very readable due to their smalll size

The problem is, the standard viewport resolution of EWB may be unreadable, or at least usually small and look wrong.

You could adjust your fonts to compensate - doing so either in your EWB code or in the configuration of the browsing computer, but then that becomes a problem when you need to support multiple devices of different dimensions.

Wouldn’t it be nicer if the code automatically adapted to the screen dimensions?

The solution I chose does exactly that. It uses the Browser’s ability to resize all content in the form to a certain zoom level.

To use it, call this SetScreenSize( width, height) with width and height as the desired minimum dimensions, or set the parameters to zero if you want it to base the width and height on the form’s own current width and height. I would recommend calling it from the Form’s Show or Size function

procedure TForm1.Form1Show(Sender: TObject);
begin
  SetScreensize( 0,0);
end;

That calls:

var
  external box : variant;

procedure TForm1.SetScreenSize( localwidth, localheight : integer );
var
   scalex : double;
   scaley : double;
   scale : double;
begin
   if localwidth = 0 then localwidth := width;
   if localheight = 0 then localheight := height;

   scalex := application.viewport.width / localwidth;
   scaley := application.viewport.height / localheight;

   scale := min( scalex, scaley );

   box := getbodyelement;
   if isie then
      CreateObject('box.style.zoom = "'+floattostr(scale)+'"')
   else begin
      CreateObject('document.body.style.zoom = "'+floattostr(scale)+'"');
      CreateObject('this.blur()');
   end;
end;

Internet Explorer is handled specially because it is not HTML5 compatible, however all modern browsers with full HTML5 support have a document.body.style.zoom setting which adjusts the zoom of all rendering.

Downside

Everything has a downside. This solution does not work well with some things in EWB which make asusmptions about the screen size, such as ShowMessage().

Here is a sample program, with the following source code showing.

unit zoom;

interface

uses WebCore, WebUI, WebForms, WebCtrls, WebLabels, WebBtns, webdom;

type

   TForm1 = class(TForm)
      Label1: TLabel;
      Label2: TLabel;
      Button1: TButton;
      AlertLabel1: TAlertLabel;
      procedure Button1Click(Sender: TObject);
      procedure Form1Size(Sender: TObject);
   private
      { Private declarations }
      procedure SetScreeNSize( localwidth, localheight : integer );

   public
      { Public declarations }
   end;

var
   Form1: TForm1;

implementation

procedure TForm1.Button1Click(Sender: TObject);
begin
  alertlabel1.Caption :='sample message text';
  alertlabel1.Visible := not alertlabel1.Visible;
end;

var
 external box : variant;

procedure TForm1.SetScreenSize( localwidth, localheight : integer );
var
  scalex : double;
  scaley : double;
  scale : double;
begin
  if localwidth = 0 then localwidth := width;
  if localheight = 0 then localheight := height;
  scalex := application.viewport.width / localwidth;
  scaley := application.viewport.height / localheight;

  scale := min( scalex, scaley );


 box := getbodyelement;// window.document.getElementsByTagName('Body')[0];
 if isie then
   CreateObject('box.style.zoom = "'+floattostr(scale)+'"')
 else begin
   CreateObject('document.body.style.zoom = "'+floattostr(scale)+'"');
   CreateObject('this.blur()');
 end;
end;

procedure TForm1.Form1Size(Sender: TObject);
begin
  alertlabel1.Visible := false;
  SetScreensize( 0,0);
end;

end.