Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Detecting Mobile browser and orientation
#1
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!
Reply
#2
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
Reply
#3
(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.
Reply
#4
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
Reply
#5
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
Reply
#6
aSession.mMobile ?


Its should be a variable of Usersession unit.
Reply
#7
(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;
Reply
#8
Thank you! "WebApplication.Browser.IsMobile" - works !
Reply
#9
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) {}
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)