You could make a .NET usercontrol that checks the
Request.Browser.IsMobileDevice
property to see whether the client is a mobile device or not.

Then create a template for the mobile version of a given documenttype, and the have the usercontrol do a

Response.Redirect(Request.Url.ToString() + "?altTemplate=XXX");

where XXX is the name of the mobile template.

(You might want to check the Request.Url for existing querystring and change the ? to a & acordingly.

Ofcause using the "Request.Browser.IsMobileDevice" requires the browser files for different devices to be acurate.

But for most modern devices like iPhone/iPad/Andriod they should be ok "out of the box"

I have had som issues with certain older Nokia devices.

This is the way we are doing it:

1. Set up 2 or 3 hierachies of templates with the same names: i) web ii) mobile iii) android

2. Except prefix the mobile/android templates with something eg "m" or "i".

3. Edit the mobile templates as needed, adding mobile assets, stylesheets etc.

4. Use the strUserAgent in the master template to detect the browser and redirect to the correct template:

 protected void Page_Load(object sender, EventArgs e)

        {

            string strUserAgent = Request.UserAgent.ToLower();

            if (strUserAgent != null)

            {

                if (

                 true// Request.Browser.IsMobileDevice == true

                   || strUserAgent.Contains("iphone")

                   || strUserAgent.Contains("ipod")

                  || strUserAgent.Contains("android")

                  || strUserAgent.Contains("iemobile")

                  //|| strUserAgent.Contains("version")

                  //|| strUserAgent.Contains("blackberry")

                  //|| strUserAgent.Contains("windows ce")

                  //|| strUserAgent.Contains("opera mini")

                  //|| strUserAgent.Contains("palm")

                  //|| strUserAgent.Contains("chrome")

                  || strUserAgent.Contains("ipad")

                    )

                {
                  // mobile site prefix for template
                  string temp_Prefix = "m";
                 
                  // if iPad and Android tablet and set the prefix
                  if (strUserAgent.Contains("ipad") || (strUserAgent.Contains("android") && !strUserAgent.Contains("mobile")))
                  {
                    temp_Prefix = "i";
                  }
                  // redirect to the page with the correct template applied
                  string templ = new umbraco.cms.businesslogic.template.Template(umbraco.presentation.nodeFactory.Node.GetCurrent().template).Alias;
                  Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri + "/" + temp_Prefix + templ, true);
                }

            }

        }

This means you don't need to go through manually setting the template name, it's just the regular template name with a prefix. Should probably check to see if the template exists before applying it and need to make sure that the document types have the mobile templates allowed for them.

Hope that helps,

Matt

Thanks guys, points me in the right direction. Seems that ALL the info I've found on achieving this in this forum uses the altTemplate function.

Cheers

Thanks for that Matt

I'm not sure yet - but I hope jQuery mobile will work out nice for all kinds of devices. I made a quick test for a demo to a client and it was a nice experience, I will continue with that later, but if someone finds it useful here's the basic template https://gist.github.com/1536616

Hi Matt,

I have tried to implement the solution you posted above, but for some reason when I access my site i get redirected to http://<my site>/mHomepage/mHomepage, and for the life of me I cannot work out why it is adding two mHomepages to the URL. A response.write of the redirect URL before the redirect shows only http://<my site>/mHomepage

Any ideas why this might be happening. I do not have any custom redirects implemented, etc.

Graham

I've just seen this thread and thought followers might be interested in the 51Degrees (my company) Umbraco package which will make the IsMobileDevice property of Request.Browser a lot more accurate. It also provides other information like IsTablet, IsSmartPhone, Screen dimensions in mms and inches, input methods, etc. It can be found in the Umbraco package library by searched for 51Degrees package.

is working on a reply...