Case 1 : Redirecting a site to a mobile version
Say we have a normal website that we need to redirect to a mobile version if viewed from a mobile device. All the code required for mobile detection is in a single file ‘Mobile_Detect.php’, which we can include in our web pages or in the primary index file. To simplify discussion let us assume you have a website ‘example1.com’ with a single index file, and need to redirect to ‘mobile.example1.com’ if a mobile device is detected. We need to put the following in the header of the index file of ‘example1.com’.
/* Change path info depending on your file locations */
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if($detect->isMobile()) {
header('Location: http://mobile.example1.com/');
exit;
}
Case 2: Loading different resources depending on the device
We can load or modify existing content based on the users device profile. For example we could load a different CSS for a mobile or a tablet.
$detect = new Mobile_Detect;
if($detect->isMobile() || $detect->isTablet()) {
echo "<link rel='stylesheet' href='mobile.css type='text/css' />";
} else {
echo "<link rel='stylesheet' href='style.css type='text/css' />";
}
you can also user Javascript:
<script type="text/javascript">
<!--
if (screen.width <= 800) {
window.location = "http://m.domain.com";
}
//-->
</script>
or
You can use a .htaccess redirect to transfer visitors based upon the MIME types the browser supports. For example, if the user's browser accepts mime types that include WML (Wireless Markup Language), then most likely it is a mobile device.
The code below should be placed in your .htaccess file:
RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L]
If youve got 2 sites one for each device (not the best thing to do here) you can have a index.php file on the root with :
<script type="text/javascript">
<!--
if (screen.width <= 800) {
window.location = "http://your.domain.com/mobile";
} else { window.location = "http://your.domain.com/desktop"; }
//-->
</script>