I will start this post the way I start all my developer posts, I am not a master coder and am still learning. I spent several hours working on this, so I’m posting to save others’ valuable time. There are probably many easier/better ways to do it, but this definitely works. If you have found a better way, please post it in the comments section.
Feel free to use this solution on any of your projects, but please leave the credits in there and provide for me here. Thanks.
The Situation
I created a mirror site for the main website that was optimized for mobile devices. Each page on the mirror site had the same filename as it’s counterpart on the main site, but the mobile optimized files were in a subdomain like http://mobile.thesiteimtalkingabout.com. What I wanted to do was have the website automatically detect whether the visitor was using a mobile device to view the site and if so, redirect them to the same page on the mobile optimized site. For example, if someone using a mobile device tried to go to http://thesiteimtalkingabout.com/aboutus.php, they woul automatically be redirected to http://mobile.thesiteimtalkingabout.com/aboutus.php.
The Problem
I looked high and low and found a solution here that required editing the .htaccess file for the site (which I tried to no avail) and others that would redirect to the index page of the mobile optimized site regardless of which page the visitor on the mobile device was trying to visit.
The Solution
I ended up combining a couple of the solutions that I found along with some customization to get the job done. Here is what I ended up with (The comments in the code give credit to the sites that helped out).
<?php // This code borrowed from 9 Lessons at http://www.9lessons.info/2010/09/redirect-mobile-devices-with-php.html ob_start(); echo $_SERVER['HTTP_USER_AGENT']; $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"); $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android"); $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS"); $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry"); $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod"); // This code borrowed from http://www.webcheatsheet.com/PHP/get_current_page_url.php function curPageURL() { $pageURL = 'http'; if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";} $pageURL .= "://"; if ($_SERVER["SERVER_PORT"] != "80") { $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]; } else { $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; } return $pageURL; } $url = curPageURL(); // Gives the function a temporary variable $mobile = str_replace('http://yoursitenamehere.com', 'http://mobile.yoursitenamehere.com', $url); // Allows the returned url from curPageURL to be replaced with the redirect URL for mobile devices but still maintains the separate page file names // This code also borrowed from 9 Lessons at http://www.9lessons.info/2010/09/redirect-mobile-devices-with-php.html if ($iphone || $android || $palmpre || $ipod || $berry == true) { header('Location:' . $mobile); //OR echo "<script>window.location='" . $mobile . "'</script>"; } else { ob_end_clean(); } ?>
Be sure to:
1.) Make sure you have your mobile optimized mirror site built and setup at either a subdomain or subdirectory on your website.
2.) Paste the code above at the top of all of your webpages. NOTE: This must be the first thing in your website files. So, it must be placed before the DOCTYPE declaration.
3.) Change the URL above from yoursitename.com to whatever your website URL is (on line 31 of the code snippet above).
If you want to make your code a bit cleaner, save the above code with your URL changes to a separate file (i.e., redirect-mobile-devices.php) and save it to the root of your website. Then, add the code
<?php include ('redirect-mobile-devices.php') ?>
on the first line of all your website files.
More “professional” but free solution is to use Apache Mobile Filter. Is an open source project that does DeviceDetection, Image rendering and Mobile Redirect.
For more info: http://www.apachemobilefilter.org
Idel,
Thanks for this. Looks interesting. Do you know if the image rendering creates a thumbnail or just sizes the larger image down? Just wondering how it affects load times for mobile devices.
I’ll definitely check AMF out.
Mas, kalau di front page saya menggunakan sittac page, lalu bagaimana cara menampilkan daftar artikel terbarunya?Seperti di CafeBisnis itu kan front pagenya pakai sittac page, terus daftar artikelnya di cafebisnis.com/artikel.Bagimana membuat seperti itu? Static front pagenya sih saya bisa, tapi dynamic page di url tertentu itu yang ga ngerti. Mohon pencerahannya. Terima kasih.
Kalia,
Your question seems like more of a WordPress or general website question than a mobile redirect question. However, in WordPress settings under Reading, you set the front page to either a static page or a posts page.
Hope this helps.
Question: I have a video that plays on android but not on iphone and vice versa.. I want to create a page that detects what device they come from and then direct them to vimeo on android and youtube on iphone.
Can where do you put an or statement in this code?
Scotty,
Thanks for the question. I believe you can accomplish what you are trying to do with an ELSEIF statement rather than an OR statement.
For example, you could use the code above and replace the last IF statement with the following:
$androidRedirect = "http://your-vimeo-url.com";
$iphoneRedirect = "http://your-youtube-url.com";
if ($palmpre || $ipod || $berry == true)
{
header('Location:' . $mobile);
//OR
echo "window.location='" . $mobile . "'";
} elseif ($iphone)
{
header('Location:' . $iphoneRedirect);
//OR
echo "window.location='" . $iphoneRedirect . "'";
} elseif ($android)
{
header('Location:' . $androidRedirect);
//OR
echo "window.location='" . $androidRedirect . "'";
} else
{
ob_end_clean();
}
Let me know if this is what you’re looking for.
Thanks.
GREAT!This tutorial/full sciprt is just the thing i was looking for…I made some modifications, so you can check the URL (if is alive) and also if is real (in the actual “version”, you can put anything and is added to the db)I also added a “bookmarklet”, a “title” field in the db, a click counter, even a simple template class for the initial page….I’m working on a way to auto-get the title of the URL (this field is automatcly inserted trhu javasciprt, much simpler)Also i like to add a “most visited” and “newest” links… just for the fun of it …Really great sciprt you have here.Just contact me and i send you the link to check my modifications(in this moment is a personal services for my blog and twitter)Almost forget … also I like to create the simplest API possible (but maybe in a near future)I would like to share the code when is more finished…for example to add every credit for all the snippets i found and give proper credit to the authors)
Shaban,
Glad you found it helpful. I try to post things like this, especially when I spend loads of time searching and working on them. It’s also so that if I ever have to do it again, I have the information stored in an easy to find place. 😉
I look forward to seeing you you’ve modified this.
Thanks.
Great synopsis of eocmmnting and how to very well written and all that link love you just poured out, great post, if this was a forum you would have a sticky on this.
This works great..! thanks for the info.
Our pleasure. Glad to be of service.
Well,you can take the help of mobile device resources that are used for developing a website.I am sure this solution will work for you.
i’ve read this before, but still interesting.
This is, by far, the easiest method to handle cell phone users. Instead of worrying whether they can or cannot see your pages, simply put a link somewhere near the top of the page that points to your mobile version. Then the readers can self-select whether they want to see the optimized version or continue with the normal version.