locked
How do I detect a mobile browser in a MVC5 application RRS feed

  • Question

  • User-1579955087 posted

    Is there a good way to detect if the user is using a mobile browser in the view (using RAZOR). I'm wanting to differ the display logic if it's a mobile browser. i using code asp.net MVC5.

    hellp me.

    Thanks

    Wednesday, November 7, 2018 12:12 PM

Answers

  • User-821857111 posted

    The problem with most current approaches to device detection is that they rely on the information provided in the user-agent header (accessible in MVC via the Request.UserAgent property in a controller). Any Regex expression, library or other code that depends on the information provided by that header (which can be spoofed, by the way) must be kept up to date to be of any real use. And that, historically, has always proven to be difficult.

    That's why the recommended approach to display management is to use Responsive Web Design (which makes use of media queries as Patrice said). That approach also allows you to define a "mobile device" according to its dimensions. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 7, 2018 4:08 PM
  • User1520731567 posted

    Hi salegiatot.com,

    The answer from this article:

    ASP.Net does have in-built mobile phone browser detection capabilities and you can check whether user is using a Mobile phone browser or Desktop browser using the Request.Browser.IsMobileDevice property.

    So in your razor code, you can query this variable and render accordingly.

    For example, in your view (razor):

    @if (Request.Browser.IsMobileDevice) {
      <!-- HTML here for mobile device -->
    } else {
      <!-- HTML for desktop device -->
    }

    More details,you could refer to:

    https://www.aspsnippets.com/Articles/Detect-Mobile-Browser-Mobile-Device-in-ASPNet-MVC.aspx

    https://www.codeproject.com/Articles/34422/Detecting-a-mobile-browser-in-ASP-NET

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 8, 2018 7:18 AM

All replies

  • User-1646292712 posted

    Using code:

     public static bool checkMobi()
        {
            bool blnResult = false;
            string userAgent = HttpContext.Current.Request.ServerVariables["HTTP_USER_AGENT"];
            Regex OS = new Regex(@"(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline);
            Regex device = new Regex(@"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-", RegexOptions.IgnoreCase | RegexOptions.Multiline);
            string device_info = string.Empty;
            if (OS.IsMatch(userAgent))
            {
                device_info = OS.Match(userAgent).Groups[0].Value;
            }
            if (device.IsMatch(userAgent.Substring(0, 4)))
            {
                device_info += device.Match(userAgent).Groups[0].Value;
            }
            if (!string.IsNullOrEmpty(device_info))
            {
                blnResult = true;
            }
            return blnResult;
        }

    Wednesday, November 7, 2018 12:25 PM
  • User753101303 posted

    Hi,

    As this is a display issue, your best bet is likely to check which space is available using media queries. See https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Wednesday, November 7, 2018 12:28 PM
  • User-821857111 posted

    The problem with most current approaches to device detection is that they rely on the information provided in the user-agent header (accessible in MVC via the Request.UserAgent property in a controller). Any Regex expression, library or other code that depends on the information provided by that header (which can be spoofed, by the way) must be kept up to date to be of any real use. And that, historically, has always proven to be difficult.

    That's why the recommended approach to display management is to use Responsive Web Design (which makes use of media queries as Patrice said). That approach also allows you to define a "mobile device" according to its dimensions. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 7, 2018 4:08 PM
  • User1520731567 posted

    Hi salegiatot.com,

    The answer from this article:

    ASP.Net does have in-built mobile phone browser detection capabilities and you can check whether user is using a Mobile phone browser or Desktop browser using the Request.Browser.IsMobileDevice property.

    So in your razor code, you can query this variable and render accordingly.

    For example, in your view (razor):

    @if (Request.Browser.IsMobileDevice) {
      <!-- HTML here for mobile device -->
    } else {
      <!-- HTML for desktop device -->
    }

    More details,you could refer to:

    https://www.aspsnippets.com/Articles/Detect-Mobile-Browser-Mobile-Device-in-ASPNet-MVC.aspx

    https://www.codeproject.com/Articles/34422/Detecting-a-mobile-browser-in-ASP-NET

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 8, 2018 7:18 AM