1

I'm creating a mobile version of a website, but only for smartphones. If the device is a tablet, notebook, netbook, desktop, or whatever similar device, I want the user to automatically go to the full site. If it was simple CSS, I would know how to do it. However, the mobile version uses different templates and scripts than the full-site version, and needs to be redirected accordingly rather than simply use another stylesheet.

Anybody have a suggestion or article that can show how to detect said devices and redirect accordingly?

user1100412
  • 699
  • 1
  • 10
  • 22

2 Answers2

1

The only way I could find to do this was a hack in which I:

  1. Used css media queries to detect phones using max-device-width

  2. Set a change in style on this basis - I changed body color from #000000 to #000001

  3. Use an OnLoad to call a Javascript to check the body color.

  4. Redirect on this basis. (In my own case I actually used a window.confirm call to offer the user a choice, rather than forcing redirection).

    <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Phone test</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
    body
    { color: rgb(0, 0, 0);}
    @media screen and (max-device-width:600px), screen and (max-width:600px)
    {
        body{ color: rgb(0, 0, 1);}
    }
</style>
<script type="text/javascript">
<!--
function doPhoneCheck()
{
    var col;
    if(document.body.currentStyle)
    {
        col = document.body.currentStyle.color; // IE
    }
    else
    {
        col = getComputedStyle(document.body).getPropertyValue("color");
    }
    if(col =="rgb(0, 0, 1)")
    {
        window.location.href="http://www.apple.com/";
    }
}
//-->
</script>

It detects all iPhones to 6+, and the Android and Windows phones I've tested. It discriminates against all current iPads and against the laptops and desktops I've tried.

NB

(1) For color you must use rgb and leave spaces exactly as written.

(2) I found similar code would not detect body background-color for some unknown reason.

(3) The key to detecting the css style is to use getComputedStyle() (or currentStyle for IE) rather than getStyle().

(4) Even though the change in body color is imperceptible, it can be over-ridden by specifying colors for all your css classes etc.

David
  • 1,018
  • 13
  • 22
1

A working solution to your problem can be found here: https://github.com/sebarmeli/JS-Redirection-Mobile-Site

Michael Junge
  • 11
  • 1