Search code examples
delphitmstms-web-core

How to check if a TMS WEB Core Website is run on a mobile or desktop?


I want to know whether the user is using the website from a desktop or a mobile so that I can adjust my UI according to the person's device (desktop or mobile).

How can I check this in TMS WEB Core using Delphi?


Solution

  • There are multiple ways you can do this, but here are three of the ways that I found:

    Application.IsMobile

    You can use the Application.IsMobile function to check if it's a mobile or desktop device. This function will literally just return a boolean that says True or False depending on whether it's a mobile or not:

    if Application.IsMobile then
      ShowMessage('This is a mobile device')
    else
      ShowMessage('This is not a mobile device');
    

    This is also the recommended method to check if it's a mobile device or desktop device.

    Custom Function using the browser's window width

    You could write your own IsMobile function that uses the browser's window width.

    This isn't 100% accurate as it doesn't check if it's actually a mobile device or not, but rather assumes it's a mobile device if the width is very small. This is fairly common practice in websites using CSS Media Queries.

    function CheckMobile(): Boolean;
    begin
      Result := window.outerWidth < 800;
    end;
    

    You can change the "800" to whatever you want "mobile" to be, and then you can use it like this:

    if CheckMobile then
      ShowMessage('This is a mobile device')
    else
      ShowMessage('This is not a mobile device');
    

    Using the Form's Width

    This is very similar to using the browser's window width, but here you're using the form's width. So assuming your form's name is Form1, then you can do:

    if (Form1.Width < 800) then
      ShowMessage('This is a mobile device')
    else
      ShowMessage('This is not a mobile device');