Pues eso… aunque he leído por ahí que no es conveniente detectar si se está navegando en un dispositivo móvil… eso era porque lo hacía con código duro (hard-code) es decir, detectar según el valor devuelto por userAgent de window.navigator, que sí, que puede producir resultados no deseados… pero… si usas Request.Browser.IsMobileDevice la cosa cambia.
Y hacer esa comprobación es bien simple.
¿Dónde hacerla?
En cualquier parte del código «script» de tu página ASP.NET (de .NET Framework), ya sea que estés usando Visual Basic o C# (o incluso otros lenguajes que soporten las páginas web asp.net de .net framework).
Un par de ejemplos, por favor
Esta es una página .aspx con código para C#:
<%@ Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice)
{
LabelDesktop.Visible = false;
LabelMobile.Visible = true;
}
else
{
LabelDesktop.Visible = true;
LabelMobile.Visible = false;
}
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="font-family:Consolas">
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="LabelMobile" Visible="false"
Font-Size="xx-Large" Font-Bold="true"
Text="Estas viendo esto en el navegador de un dispositivo móvil." />
<asp:Label runat="server" ID="LabelDesktop" Visible="false"
Font-Size="xx-Large" Font-Bold="true"
Text="Estas viendo esto en el navegador de escritorio." />
</div>
</form>
</body>
</html>
Esta es una página .aspx con código para Visual Basic:
<%@ Page Language="VB" AutoEventWireup="true" %>
<script runat="server">
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Request.Browser.IsMobileDevice Then
LabelDesktop.Visible = False
LabelMobile.Visible = True
Else
LabelDesktop.Visible = True
LabelMobile.Visible = False
End If
End Sub
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="font-family:Consolas">
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="LabelMobile" Visible="false"
Font-Size="xx-Large" Font-Bold="true"
Text="Estas viendo esto en el navegador de un dispositivo móvil." />
<asp:Label runat="server" ID="LabelDesktop" Visible="false"
Font-Size="xx-Large" Font-Bold="true"
Text="Estas viendo esto en el navegador de escritorio." />
</div>
</form>
</body>
</html>
Nota:
Puedes tener las dos páginas en una misma aplicación o proyecto WEB de Visual Studio sin necesidad de hacer nada especial, solo tener las páginas en un sitio que acepte .NET Framework.
A tener en cuenta
Si muestras la páginas en un dispositivo móvil, es posible que el navegador te permita ver la página como «escritorio», en ese caso, el valor que devuelve es escritorio, no que es móvil.
En las siguientes capturas tienes la demostración.
En esas capturas estoy usando el Edge para Android en un Google Pixel 4a.
En la figura 1 estoy mostrando la página versión de Visual Basic en el móvil, que si quieres la puedes probar usando el enlace mostrado (está alojada en mi sitio: elguille.info/WebFormVB.aspx).
Figura 1.
En la figura 2 te muestro la versión para C# antes de cambiarla a modo escritorio.
También puedes probarla usando este enlace en mi sitio: elguille.info/WebFormCS.aspx.
Figura 2. Mostrando la página como móvil y queriendo cambiar a versión para ordenador
Figura 3. Mostrando la página como si estuviese en escritorio y queriendo cambiar a versión apra sitio móvil.
Nota:
También puedes probarlo en el navegador de escritorio usando las herramientas de desarrollador, que en Edge y Chrome se pueden acceder usando Ctrl+Shift+I.
Y desde esas herramientas puedes indicar que se muestre como si fuese en un móvil (ver la figura 4).
Figura 4. Usando las herramientas de desarrollador puedes ver en el escritorio cómo sería usarlo en un móvil… o casi.
Espero que te sea de utilidad 😉
Nos vemos.
Guillermo