While I have a successful method of getting users from our mobile site to our full site, I need help getting them from the full site back to the mobile site.
I'm trying to use a combination of CSS and Javscript-written HTML (below) which is using server side detection. Basically the detection determines if the user is on a smart phone and, if so, writes the banner HTML. It should look like this, but unfortunately this isn't working. PHP isn't an option.
My question is, how can I get the "View Mobile" banner to appear only on smart phones (i.e. iPhone & Android)?
Here's my page and code:
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-width: 640px)" />
...
<body>
<script type="text/javascript">
<!--
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
device_class = readCookie('COOKIE_DEVICE_CLASS');
if (device_class == 'smart') {
document.write('<div id="view-mobile"><a href="http://m.stanford.edu/">View Stanford Mobile</a></div>');
}
// -->
</script>
Your cookie is not being set. I visited both stanford.edu and m.stanford.edu, and I do not get a COOKIE_DEVICE_CLASS cookie. If the cookie is created and contains 'smart' your code will work.