Detecting Mobile Browsers Part 2
Posted by Greg Bulmash in Techno Thoughts, Web Programming, tags: PHPWhile a lot of people have written in with kudos on my PHP code for detecting mobile browsers, others have written in with questions on how to use it.
The code in question is a PHP function that returns a true or false value depending on whether the browser viewing the page has been identified as mobile or not. If it's identified as mobile, it returns a "true" status. If it's not, it returns a "false" status. So, if you use the code exactly as presented in the original article, you're going to put it somewhere near the end of the PHP code block in your page. Somewhere near the beginning of the page, you'll want a PHP code block like this...
if(checkmobile()){
//code to execute if a mobile browser is detected
}
Now what code you'll execute is up to you. It might be that you simply select a mobile style sheet instead of your regular one. To do that, you'd do something like...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>My Page Title</TITLE>
<?php
if(checkmobile()){
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/mobilestyle.css\">";
} else {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/regularstyle.css\">";
}
?>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
...
Now remember, this assumes you've put the mobile browser detection code somewhere in the page between <?PHP ... ?> tags.
Some of you, on the other hand, may want to send mobile browsers over to an entirely different version of your site. The simplest way is to do...
<?php
if(checkmobile()) header("Location:http://www.whatever-url-you-want.com");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
...
Note that this is at the VERY VERY top of the page, before anything else. That's because, you need to do the redirect before any other information has been sent to the user's browser.
You can put the code for catching mobile browsers right in that PHP block, after the "if(checkmobile())" line and before the "?>" line. I haven't included it in the examples just to keep this page from being humongously long.
Depending on how your server is set up, any file that contains PHP may require that the file name end in .php instead of .htm or .html. So make sure you know what your server requires.
Hope this helps some of you who aren't familiar with programming. If you need further help, I suggest buying a book on PHP if you're in a DIY mood or hiring someone who knows it if you're not.
Entries (RSS)
[...] UPDATE #2: Need help using the code in this article? I've written a second article with code to help you handle your mobile users when this piece of code detects them. [...]
You might want to put an exit(); after the header(...); line, so that the page stops sending needlessly after the redirect is sent. Like so:
if(checkmobile())
{
header("Location:http://www.whatever-url-you-want.com");
exit();
}
// etc.
Regarding the exit() suggestion, w3c recommendations are that you include a little markup that provides a 'Click here' link in case the redirect fails to work, so perhaps a conditional bit of XHTML would be a better option.
This is a great script, but what if I STILL want to direct iPhone users to another site (and not the mobile site), say iphone.mysite.com where all other mobiles are directed to mobile.mysite.com. (and desktop browsers still bypass and go to http://www.mysite.com)
Thx
Nick
Right now the checkmobile() function returns "true" or "false". It would have to be rejiggered to return an A/B/C option (mobile, non-mobile, iphone). Then instead of if(checkmobile()), you'd have if (checkmobile()=="iphone") or something to that extent so that you could execute different code.
Hi,
I have the same question as Nick Fox. What's the entire PHP code that I'd need to add to add to allow desktop browsers through, but to redirect iPhone users to one page, and mobile users to another? Any help would be really appreciated.
Thanks!
I gues it would look like this...
if(checkmobile() == "iphone")
{
header("Location:http://www.whatever-url-you-want.com");
}
else if(checkmobile() == "mobile")
{
header("Location:http://www.mobilesite.com");
}
else
{
//normal browser, do nothing
}
Nick and Marise, I think this is what you mean. Create a file called checkmobile.php in notepad and paste in the following modified checkmobile function:
Now in your xHTML/PHP (index.php, for example), you start the file with the following:
Then begin your markup (HTML/xHTML) after that. If you are just switching stylesheets and not redirecting, move the code to where you want to declare your stylesheets and simply replace the header and exit lines with something like the following:
case "iphone":
echo "";
break;
Hope that helps. You may have solved the problem already but others may be searching.
I do apologize, it removed the code tags for my example. I've uploaded a zip file with samples of a redirect and one with stylesheet switching to the following address:
http://www.filesavr.com/checkmobileexample
I have integrated and used the redirect code and it works flawlessly!
) but the code is inside index.php which is the home page of the main "none mobile" site. I want when someone is on a mobile to be able to type in http://www.mysite.com/ and it redirect. (only from a mobile, remember). Right now it only redirects if I type in my mobile the exact file directory http://www.mysite.com/index.php .....Any help would be greatly appreciated!
Kenny, do you have an index.html file and an index.php file? That's the only reason I can think of that would cause your problem. If that is the case, the reason is that when you just type in http://www.mysite.com, your web server software (most likely apache) is picking the index.html file before it picks an index.php file. All you'll need to do is make your index.php file look like this:
<?php
... [code from index.php]
?>
[paste code from index.html]
Basically copy and paste the html code from index.html after the ?> in the index.php file. Save it, then delete the index.html file. Now load up http://www.mysite.com and since there is no index.html file, it should automatically pick index.php and redirect correctly.
Yeah, see regarding the index.php and index.html both existing situation, I've tried to do that with an htaccess pointing to index.php as the primary listing and index.html as the first alternative; the goal being to have index.php contain the mobile redirect code, redirecting to a single static mobile page (index_m.html) or the standard website (index.html). Yeah, not W3 compliant by any stretch but I'm very inexperienced, didn't have access to subdomains (groan) and to place the redirect code in the index page itself felt like I'd be playing with fire. Plus, in the event of a serverside php problem, the site maintainer would only need to delete the php page and it'd be up and running again.
Messy and it worked well for a while, but then funnily enough subsequently caused the server to later disable PHP entirely. Im guessing it was because of some hangup on an .php and .html clash but really have no clue there.
Either way, I'm kinda afraid to touch the two indexes issue again.