Question

I have a mobile site but I need a script to redirect a user to it if they are on a mobile device.

Answer 1

There are several ways you can do it, but detecting the screen size is a good way to do that. Note that the screen width is independent of the browser window size.

<script type="text/javascript">
<!--
if (screen.width <= 699) {
  document.location = "mobile.html";
}
//-->
</script>

You can also match specific devices like the iPhone or iPod by the User Agent string.

<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>

Important Caveat

While this works, it’s also very annoying to get redirected to the mobile site’s front page when you’re trying to visit a particular page. For example, when you follow a link from Facebook trying to access an article, if the site redirects you to the front page of the mobile version of the site, it’s infuriating and very unhelpful! Chances are, they’ll never try hard enough to find the content.

paulsm4 is correct that using CSS to serve a mobile layout for your site at the same URL instead of redirecting is a much more desirable solution. However if that’s not an option, the next best thing is to redirect to the matching URL for the mobile version of the site.

For example, if you just have a different subdomain for your mobile site, then you can use Javascript to redirect to the correct page of the mobile version:

<script type="text/javascript">
<!--
// Full URL:   http://example.com/articles/1
// Mobile URL: http://mobile.example.com/articles/1
if (screen.width <= 699) {
  // Redirect to the same page on the mobile site
  document.location.host = "mobile." + document.location.host;
}
//-->
</script>