Detecting Mobile browser and orientation

[lfeliz]

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!

[ShaneStump]

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

[lfeliz]

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

[DanBarclay]

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

[Kristy]

aSession.mMobile ?


Its should be a variable of Usersession unit.

[raulevm]

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 !

[larryhems]

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.

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 .

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:

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