Redirect based on mobile device

What are the best way to redirect visitors based on thier devices?
I use asp.net and redirecting through the page_load event.

The webpage have a startpage who need to check if this visitor are
1. computer based visitor
2. mobile based visitor

If 1, visit full start page
If 2 check screen size then visit the most fittable screen size version of mobile page (2 different screens)

Thank's in advanced,
LVL 1
dingirAsked:
Who is Participating?
 
mandar_udg80Connect With a Mentor Commented:
sorry! could not complete the post  and submited by mistake.

1. get the browser type(and version if required) and assign it to a veriable
2. Copy your existing css file and modify classes to suit your requirment
3. rename this css file to something else
4. in you ASPX page, just include a code snippet depending on the browser type as below,
<%
  if (request.get["browserType"]=="IE6")

%>
//use IE6 css here
<%else   if (request.get["browserType"]=="IEMobile")%>
//use mobile css here

this way you dont need to have different pages for each device but just different static css files which will seldom change. Thus saves you from code maintenance.

Hope it helps!
0
 
isaackhaziCommented:

<script runat="server" language="c#">
    public void Page_Load(Object sender, EventArgs e) 
    {
        if (Request.Browser["IsMobileDevice"] == "true" ) 
        {
            Response.Redirect("MobileDefault.aspx");
        }
        else 
        {
            Response.Redirect("DesktopDefault.aspx");
        }
    }
</script>

Open in new window

0
 
isaackhaziCommented:
for the resolution part you will havr to add somethng like this
<script runat="server" language="C#">
 
    public void Page_Load(Object sender, EventArgs e){
 
        if (Request.QueryString["action"] != null) {
            // store the screen resolution in Session["ScreenResolution"] 
            // and redirect back to default.aspx
            Session["ScreenResolution"] = Request.QueryString["res"].ToString();
            Response.Redirect("default.aspx");
        }
    }
    // JavaScript code below will determine the user screen resolution 
    // and redirect to itself with action=set QueryString parameter 
 
</script>

Open in new window

0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
dingirAuthor Commented:
vb.net ! but I can translate those parts. thank's I will check it in evening.
0
 
isaackhaziCommented:
Something like this should work....
I hope you get the idea...

Cheers
<script runat="server" language="c#">
    public void Page_Load(Object sender, EventArgs e) 
    {
        if (Request.Browser["IsMobileDevice"] == "true" ) 
        {
           if(Page.Request.Browser.ScreenPixelsWidth = something AND Page.Request.Browser.ScreenPixelsHeight = something)
              Response.Redirect("MobileDefault.aspx");
        }
        else 
        {
            Response.Redirect("DesktopDefault.aspx");
        }
    }
</script>

Open in new window

0
 
dingirAuthor Commented:
Request.Browser("IsMobileDevice")
How reliable is this in overall, based on different type of mobile phones AND older / newer phones / software on phones?

       if Request.QueryString("action") <> "" Then
            Session("ScreenResolution") = Request.QueryString)"res")
            Response.Redirect("default.aspx");
      end if

Where does the screen size come in this picture?
0
 
isaackhaziCommented:
Al mobile devices have compact browsers. So, when the mobile is trying to access the site ASP will detect it as a Mobile browser. It is very reliable.

Please skip my second comment. Use the last comment i made. It should work well. ie.
<script runat="server" language="c#">
    public void Page_Load(Object sender, EventArgs e) 
    {
        if (Request.Browser["IsMobileDevice"] == "true" ) 
        {
           if(Page.Request.Browser.ScreenPixelsWidth = something AND Page.Request.Browser.ScreenPixelsHeight = something)
              Response.Redirect("MobileDefault.aspx");
        }
        else 
        {
            Response.Redirect("DesktopDefault.aspx");
        }
    }
</script>

Open in new window

0
 
dingirAuthor Commented:
Thank's but I', not sure anymore. My Windows Mobile 6 goes "IsMobileDevice = False" and gives me 640x480 pixels with those ScreenPixelsWidth/Height information.

        Dim ScreenX As Integer = 216
        Dim ScreenY As Integer = 320

        If Request.Browser("IsMobileDevice") = "true" Then
            Response.write("Mobile<br>")
            Response.write("Width: " & Page.Request.Browser.ScreenPixelsWidth & "<br>")
            Response.write("Height: " & Page.Request.Browser.ScreenPixelsHeight & "<br>")
            'If Page.Request.Browser.ScreenPixelsWidth < ScreenX And Page.Request.Browser.ScreenPixelsHeight < ScreenY Then
            '    Response.Redirect("m.aspx")
            'Else
            '    Response.Redirect("Desktop.aspx")
            'End If
        Else
            Response.write("Computer<br>")
            Response.write("Width: " & Page.Request.Browser.ScreenPixelsWidth & "<br>")
            Response.write("Height: " & Page.Request.Browser.ScreenPixelsHeight & "<br>")
            'Response.Redirect("Desktop.aspx")
        End If


Gives
Computer
Width: 640
Height: 480

On both mobile and computer. Did I miss something?
0
 
dingirAuthor Commented:
I found a fantastic solution named wurfl with wurflApi.dll, which did exactly what I wanted. Try that out!

My problem (still left) is to figure out the screen resolution. the browser.screenpixelwidth seems to take som sort of "capable" width (and height). Both the mobile browser and computer gaves med 640x480 pixels.

Spooky.
0
 
mandar_udg80Commented:
I have a different solution for you in case it fits in.

I think that you want to present a different look and feel for different devices (desktop and mobile).

To have a scalable solution with which you can define customized look n feel for different browsers/devices, why not define separate CSS files for each platform. This will help you to extend support for different browsers.

In Asp.net you can do something similar as below to detect browser properties,-



Your browser is: <asp:literal id="ltlBrowserName" runat="server" />
<p>
<b><u>Here is your browser's information:</u></b><br />
<asp:literal runat="server" id="ltlAllData" />


<script language="VB" runat="server">
  Sub Page_Load(sender as Object, e as EventArgs)
    ltlBrowserName.Text = Request.Browser.Type & ", " & Request.Browser.Platform
    
    ltlAllData.Text = "Type = " & Request.Browser.Type & "<br>"
    ltlAllData.Text &= "Name = " & Request.Browser.Browser & "<br>"
    ltlAllData.Text &= "Version = " & Request.Browser.Version & "<br>"
    ltlAllData.Text &= "Major Version = " & Request.Browser.MajorVersion & "<br>"
    ltlAllData.Text &= "Minor Version = " & Request.Browser.MinorVersion & "<br>"
    ltlAllData.Text &= "Platform = " & Request.Browser.Platform & "<br>"
    ltlAllData.Text &= "Is Beta = " & Request.Browser.Beta & "<br>"
    ltlAllData.Text &= "Is Crawler = " & Request.Browser.Crawler & "<br>"
    ltlAllData.Text &= "Is AOL = " & Request.Browser.AOL & "<br>"
    ltlAllData.Text &= "Is Win16 = " & Request.Browser.Win16 & "<br>"
    ltlAllData.Text &= "Is Win32 = " & Request.Browser.Win32 & "<br>"
    ltlAllData.Text &= "Supports Frames = " & Request.Browser.Frames & "<br>"
    ltlAllData.Text &= "Supports Tables = " & Request.Browser.Tables & "<br>"
    ltlAllData.Text &= "Supports Cookies = " & Request.Browser.Cookies & "<br>"
    ltlAllData.Text &= "Supports VB Script = " & Request.Browser.VBScript & "<br>"
    ltlAllData.Text &= "Supports JavaScript = " & Request.Browser.JavaScript & "<br>"
    ltlAllData.Text &= "Supports Java Applets = " & Request.Browser.JavaApplets & "<br>"
    ltlAllData.Text &= "CDF = " & Request.Browser.CDF & "<br>"      
  End Sub
</script>

Open in new window

0
 
dingirAuthor Commented:
Thank's a lot. Even though I now find a nice solution myself I understand that your sample are a nice complement to it. I also may need it later in the finishing of the project. Thank's so far.
0
 
dingirAuthor Commented:
Use when check the version 2 of mobile.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.