Unless we are making a completely responsive site where the styles of the site shift based on the dimensions of the device, we most likely will need to do some sort of redirect to a mobile friendly version of our site.
Lucky for us, this can easily be achieved in several ways. Although I won't cover in detail the ways in which we can achieve this, here are a few techniques that might help out when deciding how to move forward.
Tip
Since this book is geared towards the frontend, routing to a mobile site will be briefly covered with PHP and htaccess. We can always perform this process on the frontend, but it should be avoided for SEO and page-ranking purposes.
In PHP we could do the following type of redirect:
<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'], "iPhone");
if ($iphone) {
header('Location: http://mobile.site.com/');
}
?>In this example we are creating a variable, $iPhone, and giving it a Boolean value of true or false. If iPhone is found in the user agent, which may or may not be the best technique to use, then we tell the page to redirect using the
header() method in PHP.
Again, there are other ways of achieving this, but this will get you off the ground and running.
We can also detect the iPhone and redirect it by putting these instructions on the server using an htaccess file:
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule .* http://mobile.example.com/ [R]In this example, we are turning on the rewrite engine, creating a rewrite condition that checks for the iPhone text in the user agent, and then creates a rewrite rule if the condition is met.
In essence, if we want to redirect to a mobile version of our site, we need to be able to detect the type of device, not its dimensions, and then redirect appropriately.