Atozed Forums

Full Version: Detecting Mobile browser and orientation
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Planning on set of mobile friendly screens for my app.

Need to detect mobile phones and tablets.

How to detect phone based browsers so I can show mobile phone login ?

Tablets are usually fine for full app in landscape.  Would be nice to be able to alert user to rotate into landscape.


I probably should have checked to see if there is a demo for this ..... 

Cheers!
Howdy Lou!

In the ServerController, use the OnBrwoserCheck event. In the event, you will see a parameter of TBrowser. The TBrowser has an IsMobile property.

Hope this helps.

All the best,

Shane
(01-17-2019, 10:16 PM)ShaneStump Wrote: [ -> ]Howdy Lou!

In the ServerController, use the OnBrwoserCheck event. In the event, you will see a parameter of TBrowser. The TBrowser has an IsMobile property.

Hope this helps.

All the best,

Shane
Thank you!  That will get me going for a while until I need to detect landscape view, though I am only utilizing mobile right now as a way to lookup contacts and provide a summary of transactions etc...  Eventually I will need a proper app, but that is for now a few years out.
Something is not working... Always defines as stationary. Look, I probably wrote something wrong...

ServerController:

  public
    { Public declarations }
    mMobile : Boolean;
  end;
...
procedure TIWServerController.IWServerControllerBaseBrowserCheck(
  aSession: TIWApplication; var rBrowser: TBrowser);
begin
  if rBrowser.IsMobile
  then mMobile := true
  else mMobile := false;
end;

procedure TfmVmMain.IWAppFormShow(Sender: TObject);
var
begin
  if TIWServerController(WebApplication).mMobile then
  begin
    lblbUser.Caption := 'Mobile';
  end else begin
    lblbUser.Caption := 'Stationary';
  end;
end;

Always defines as Stationary
Try WebApplication.Browser.isMobile

I'm not sure which is more reliable but that's what I've used for observation. I don't have behavior dependent on it but believe it would work fine.

Dan
aSession.mMobile ?


Its should be a variable of Usersession unit.
(05-21-2021, 05:55 AM)Сергей Александрович Wrote: [ -> ]Something is not working... Always defines as stationary. Look, I probably wrote something wrong...

ServerController:

  public
    { Public declarations }
    mMobile : Boolean;
  end;
...
procedure TIWServerController.IWServerControllerBaseBrowserCheck(
  aSession: TIWApplication; var rBrowser: TBrowser);
begin
  if rBrowser.IsMobile
  then mMobile := true
  else mMobile := false;
end;

procedure TfmVmMain.IWAppFormShow(Sender: TObject);
var
begin
  if TIWServerController(WebApplication).mMobile then
  begin
    lblbUser.Caption := 'Mobile';
  end else begin
    lblbUser.Caption := 'Stationary';
  end;
end;

Always defines as Stationary

This procedure shows different forms according to the connected device, it could serve you

Code:
procedure TIWServerController.IWServerControllerBaseGetMainForm(
  var vMainForm: TIWBaseForm);
var
IWApplication: TIWApplication;
W,H: Integer;
Mobile: Boolean;
begin
IWApplication := gGetWebApplicationThreadVar;
if Assigned(IWApplication) then
  begin
  W := IWApplication.FormWidth;
  H := IWApplication.FormHeight;
  Mobile := IWApplication.Browser.IsMobile;
  if Mobile = False then
    vMainForm := TIWFormLOGIN.Create(WebApplication) //PC-Laptop
  else
    vMainForm := TIWFormMLOGIN.Create(WebApplication);//Mobile
  end;
end;
Thank you! "WebApplication.Browser.IsMobile" - works !
In most cases developers use agent detection. But User Agent detection is not a recommended technique for modern web apps. There is a JavaScript API built-in for detecting media. You can use JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query.

Quote:if (window.matchMedia("(max-width: 767px)").matches)
{
// The viewport is less than 768 pixels wide
document.write("This is a mobile device.");
}

You may also use navigator.userAgentData.mobile .

Quote:const isMobile = navigator.userAgentData.mobile;


Another approach would be a responsive media query. You could presume that a mobile phone has a screen size greater than x and less than y. For example:

Quote:@media only screen and (min-width: 320px) and (max-width: 600px) {}