Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Carlos 338 posts 472 karma points
    Mar 21, 2011 @ 16:19
    Carlos
    0

    Detecting mobile and tablets

    So I wrote a post a while back on how we detected mobile devices and tablets and redirected them to different templates defined by the author.  HERE IS THE LINK.

    HOWEVER, my inclination about detecting Android tablets was wrong.  We were using in template C# in our Global template. We didn't want to use 51Degrees.mobi since it would not fit our needs. However, being in contact with the person over at 51Degrees.mobi, he is planning on working with the Umbraco people to help integrate 51degrees into Umbraco more gracefully.

    Ok Android tablet detection. 
    We were using string.Contains("Android") this got everything that was containing the user agent "Android". This didn't work in differentiating between mobile and tablet. My mistake.  So my work around was this huge client site JS solution that kind of work part of the time.

    Simple solution I did today. strUserAgent.Contains("Android") && !strUsrAgent.Contains("mobile"). Found out HERE that recommended by the Android dev team to no include "mobile" if you want your tablet to redirect to a mobile template. Or if you want to redirect to a tablet specific or desktop version of your site.  
    The solution below should cover all Android tablets so you don't have to look for specific devices.

    Here is our full solution. Remember, we put this in our Global template in the <head> section. 

     <script runat="server">  

            protected string outof = "";

            protected void Page_Load(object sender, EventArgs e)

            {

                string strUserAgent = Request.UserAgent.ToLower();

                if (strUserAgent != null)

                {

                    if (

                      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")

                        )

                    {

    //To detect iPad and Android tablet.

                      if (strUserAgent.Contains("ipad") || (strUserAgent.Contains("android") && !strUserAgent.Contains("mobile")))

                        {

                            if (umbraco.presentation.nodeFactory.Node.GetCurrent().GetProperty("chooseTabletTemplate") != null)

                            {

                                Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri + "/" + umbraco.presentation.nodeFactory.Node.GetCurrent().GetProperty("chooseTabletTemplate").Value, true);

                            }

                        }

                        else

                        {

                            if (umbraco.presentation.nodeFactory.Node.GetCurrent().GetProperty("chooseMobileTemplate") != null)

                            {

                                Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri + "/" + umbraco.presentation.nodeFactory.Node.GetCurrent().GetProperty("chooseMobileTemplate").Value, true);

                            }

                        }

                    }

                }

            }

    </script>

     

    Hope this helps anyone trying to detect Android devices both mobile and tablet.

    Any questions please let me know.

  • Tom Hare 49 posts 81 karma points
    Mar 25, 2011 @ 11:33
    Tom Hare
    0

    This is great work Carlos, thanks!

  • Pasang Tamang 252 posts 399 karma points
    Mar 25, 2011 @ 12:09
    Pasang Tamang
    0

    Here's another simple step. Tested using safari browser's user agent. Any suggestion from real device is welcome

    <xsl:variable name="userAgent" select="Exslt.ExsltRegularExpressions:match(umbraco.library:RequestServerVariables('HTTP_USER_AGENT'), 'android|ip(hone|od|ad)|macintosh','i')"/>
      <xsl:if test="$userAgent = 'iPhone'">
       iPhone browser.
      </xsl:if>

  • Karl Kopp 121 posts 227 karma points
    Apr 30, 2011 @ 03:00
    Karl Kopp
    0

    Found an error thanks to working with @leemessenger - if the HTTP request doesn't contain a User Agent, you get a 500 HTTP error. To fix, I've modified the code:

    string strUserAgent Request.UserAgent;
          if (!string.IsNullOrEmpty(strUserAgent))
          {
            strUserAgent strUserAgent.ToLower();
              if (
                Request.Browser.IsMobileDevice == true 
                 || strUserAgent.Contains("iphone")

  • Jan Skovgaard 11264 posts 23590 karma points MVP 8x admin c-trib
    Apr 30, 2011 @ 08:05
    Jan Skovgaard
    0

    Hi guys

    maybe this package can make it easier to detect mobile devices? http://our.umbraco.org/projects/website-utilities/51degreesmobi-foundation

    /Jan

  • Graham Carr 277 posts 389 karma points
    Oct 16, 2012 @ 17:57
    Graham Carr
    0

    Hi Carlos,

    I am using your solution, however when I browse the site on my mobile instead of it being redirect to http://<my site>/mHomepage it is instead being redirected to http://<my site>/mHomepage/mHomepage??

    I have done a Response.Write before the redirect and this is set to http://<my site>/mHomepage so I can't understand what is causing the extra mHomepage to be added.

    Do you have any ideas as to what maybe causing this as I really want to use the solution you have outlined.

    Graham

  • Carlos 338 posts 472 karma points
    Oct 16, 2012 @ 18:43
    Carlos
    0

    @Graham,  

    We were having an issue where we had a similar issue with some pages that could not be found, that the /mobile would constantly get added to the pages.  

    You would try to change out the if/else for the detection and response.write stuff.  The difference between yours and ours is though, we had 1 mobile template for all of the pages.  So our /mobile is actually our main mobile template.  We didn't make separate mobile templates for our main templates.  You could try the code we ended up with. If you want more explanation if the code does not work, I can try to explain a bit more.

    Here is what we ended up with.  Adding the detection of the mobile template in the wrapping "if" helps with the redirect adding the /mobile to the end of the URL. 

    if(!HttpContext.Current.Request.Url.AbsoluteUri.Contains("mobile"))
                                {
                                   if(HttpContext.Current.Request.Url.AbsoluteUri == "http://www.mywebsite.com/"){
                                    Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri "mobile");
                                    }else{
                                    Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri "/" "mobile");
                                   }
                                }
  • Graham Carr 277 posts 389 karma points
    Oct 17, 2012 @ 15:19
    Graham Carr
    0

    Hi Carlos,

    I am a little confused by your post as the code you supplied above allows the user to select a mobile template on a per page basis using the "chooseMobileTemplate" field in the document type, surely that would then allow different templates to be used??

    I am a little confused as to why when vieiwing by mobile that it is redirecting to http://<my site>/mHomepage/mHomepage especially when I output the value that is being redirected to and this is stating http://<my site>/mHomepage??

    Any help at all in the best way of me achieving what I need would be most grateful from yourself or any others out there.

    Graham

     

  • Graham Carr 277 posts 389 karma points
    Oct 17, 2012 @ 15:22
    Graham Carr
    0

    Hi Carlos,

    I am a little confused by your post as the code you supplied above allows the user to select a mobile template on a per page basis using the "chooseMobileTemplate" field in the document type, surely that would then allow different templates to be used??

    I am a little confused as to why when vieiwing by mobile that it is redirecting to http://<my site>/mHomepage/mHomepage especially when I output the value that is being redirected to and this is stating http://<my site>/mHomepage??

    Any help at all in the best way of me achieving what I need would be most grateful from yourself or any others out there.

    Graham

     

  • Carlos 338 posts 472 karma points
    Oct 17, 2012 @ 17:55
    Carlos
    0

    @Graham,

    You are right.  It has been a while since I posed this. We ended up changing the way we did this.  Instead of the user picking the template, we made the template just default to the one ./mobile template instead of having the user pick what type of template.  

    So in essence what we did was,

    1.Made one master XSLT file (can be Razor if you wish to go that route).  
    2.We call the one XSLT Macro in the /mobile template. The mobile template 
    3. In our XSLT we call our other XSLT files or properties.We actually do a giant if/else or <choose> statement in the XSLT file to determine what the document type is, then based on that, we remake the pages using our pulling in our macros into out Mobile.xslt
    So in essence the mobile XSLT macros is pulling the same information the main desktop macros and templates are pulling. Except we only have 1 mobile template and 1 XSLT file pulling in the same Macros the desktop version is using.. 
    4. We let the code above determine if the user is using a mobile device or not.

    Hope that makes sense. Let me know. It is kind of hard with text to explain everything.


    I can't set up a dummy site right now, or else I would show you example code.  I am not sure there is enough space here to put all of our code.  Let me see what I can do with screen shots and such.  Give me a few days. 

     

  • Carlos 338 posts 472 karma points
    Oct 17, 2012 @ 17:57
    Carlos
    0

    @Graham,

    If you did not want to do the mobile detections stuff, OR if you just wanted to make your site use "responsive design", you could always go the route of using CSS @media queries, detect the screen size and either switch out the CSS sheets or CSS code based on that.  

  • lucuma 261 posts 563 karma points
    Oct 17, 2012 @ 18:08
    lucuma
    0

    +1 on the media queries.  They work great and for the most part don't require additional templates if done correctly.  If you want to check out a couplerecent umbraco sites we did as responsive:

    http://belmontbaylor.com

    http://boxxseats.com

     

     

  • jason 1 post 21 karma points
    Feb 25, 2013 @ 21:29
    jason
    0

    Hello Carlos,

    Thank you for this info. I'm having a hard time understanding and adjusting it to what I need (im a designer, not a programmer...lol). What I have is a normal flash website as well as two extra html websites for mobile purposes. One site is for "mobile phones" the other site is for "Tablets". My files are uploaded to my server as www.url.com/mobile and www.url.com/tablet - and what i want to do is have code detect whichever device is visiting my site and redirected to the appropriate website. So if an iPad or Android tablet is visiting my main site (www.url.com), then it gets redirected to the tablet website at www.url.com/tablet and if an iPhone, windows, blackberry, etc visit my site it will redirect it to www.url.com/mobile. How can i adjust your code to make this work as described? Thank you again for this info and any assistance! Cheers!

  • Carlos 338 posts 472 karma points
    Feb 25, 2013 @ 22:58
    Carlos
    0

    @Jason,

    I understand you dillema. Before I decided to pick up the web dev stuff I was a designer primarily. Learned quite a bit since them. 

    It would be MUCH easier to only have one website using only HTML, CSS, and Javascript instead of Flash, but if you are keeping the Flash site I have a few suggestions. Keep in mind, A lot of stuff that Flash does now, HTML, CSS and Javascript can do.  Just FYI.  

    My suggestion would actually to have 1 alternate site/template and NOT a tablet and a mobile version.  So the alternate site would be your /mobile version (used for BOTH mobile and tablets), I would then use CSS3 @Media queries to do the resizing and positioning of elements. There are lots of resources for "Responsive Web Design" Since there is a rediculous amount of size differences in the way phone and tablets render and the manufacturers make I would suggest that you use the alternate /mobile site then. I don't know if you know much about the @Media queries but the /mobile CSS sheet would control all of the positioning and sizing of elements on the page.  You use percentages instead of fixed widths for elements that way the elements to grow and resize depending on the device size and then you don't have to worry about dealing variation of sizes with each device.  With @Media queries you set a floor (lowest screen size you want to support) and a ceiling (the higest screen size) and show those specific styles.    I would also suggest using the ViewPort meta tag as well to for the site to show at 100% of the screen.

    This way you only have 1 alternate template to have to edit and then the rest is left up to the 1 CSS sheet.

    Some good resources for @Media queries with CSS and responsive design would be:
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://css-tricks.com/css-media-queries/ ;
    http://alistapart.com/article/responsive-web-design
    http://msdn.microsoft.com/en-us/magazine/hh653584.aspx ;

    Let me know if you have any other questions. We just redid our website to adapt using Responsive design techniques.  We set our max to 767px and then iPads just use the desktop site.  

     

     

Please Sign in or register to post replies

Write your reply to:

Draft