Grow your CSS skills. Land your dream job.

Detect mobile and redirect

  • # October 6, 2011 at 12:48 am

    So I have a question about this type of script. With using this jQuery method, say you want a “desktop site” type link on your mobile website (like Google has). Well, I have tested on my phone and when I access the “desktop site” link on my mobile site, it correctly redirects me to the desktop site with a href link. However, when testing with a browser on a pc, (minimizing the browser to < 480px) when I access the "desktop site" link, it begins to load the desktop site, but then redirects to the mobile site because of the browser size. Which this is correct in my understanding. But how can I get it to still view the desktop site even if below 480px, (of course only when asked to view the full desktop site)? Seems like it may take some php script dealing with cache or something?

    Thanks in advance.

    # October 6, 2011 at 10:44 am

    Right – when I decrease my IE8 desktop browser to this – if($(window).width() < 480) – then redirects to the mobile page. However, this does not work on my Android smartphone – I still get the desktop version. I haven’t made any changes to Dave’s code other than entering the proper url. Is this just an Android problem?

    # October 6, 2011 at 10:53 am

    Hey @DocRocks, have you tried changing the code to ‘window.location.href’ yet?

    @standuncan, you could just set a cookie when you click on the ‘desktop site’ link, then check against it in the JS. If width is less than 480 and desktopCookie is false then redirect to mobile site, otherwise don’t.

    # October 6, 2011 at 10:58 am

    Yes. Here is the code – do I have the right syntax?

    # October 6, 2011 at 12:13 pm

    After viewing your source I realized that you’re missing this from the top of your document:

    Add that at the top of your and it’ll work. The problem was that without resizing the viewport to the width of the mobile device then the window width isn’t less than 480. Thus the redirect wasn’t triggered.

    John

    # October 6, 2011 at 12:42 pm

    Hey Johnnyb. Thanks very much for hanging there with me. After adding the code to the indexTest.htm file it works in my desktop but doesn’t work on my Android. I tried it first at the top of the head area, just before and after the script – same result. I tried rebooting my phone to see if there is a cache problem – nada. The script detects a narrow desktop browser – what could be the problem?

    # October 6, 2011 at 1:54 pm

    Hey, no worries. Try this link on your android and let me know if it works: http://johndoesdesign.com/dev/j/redirect/ I’ve tested it on my iphone and it works on there.

    If it works then it should redirect to http://alsautomotiveandtruck.com/mobile/

    # October 6, 2011 at 2:18 pm

    I get a text window that says – this should redirect to …. Doesn’t redirect to my mobile site. It does redirect from my desktop IE8. What is so different about Android I wonder? BTW if you want to look at the code in the test page, the file on the site is http://alsautomotiveandtruck.com/ indexTest.htm.

    # October 6, 2011 at 2:29 pm

    Just tried it on an Android (Google HTC) and it works in portrait but not landscape, must be the landscape resolution which is throwing it off. I changed the query to 600px and tested on both portrait and landscape and it now works on both: http://johndoesdesign.com/dev/j/redirect/ Test it again on your phone and let me know.

    Cheers, John

    # October 6, 2011 at 3:01 pm

    Outstanding! That Worked! Again, thanks for all your effort to help me resolve this.

    # October 6, 2011 at 4:40 pm

    Hey no problem, glad we managed to get that resolved!

    # May 16, 2012 at 1:16 am

    please provide the complete code and make the code redirect just mobile browsers not desktop browsers.

    # May 16, 2012 at 8:15 pm

    @thebliz,

    I would say that you have two options.

    1.) http://jsfiddle.net/SCm8E/1/ (which includes just the code)

    or

    2.) Read the above conversation.

    # November 22, 2012 at 10:39 am

    Hi, Could anyone help please. I’ve tried your suggestions and cant seem to get a re direct.
    This is the source code I’ve tried. any help appreciated.
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









    # November 22, 2012 at 10:49 am

    That’s not going to work unless you link to jQuery first.

Viewing 15 posts - 16 through 30 (of 45 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".