I'm building a mobile version of my site, and at this point, creating an alternate stylesheet would suffice to make the site adept for mobile devices. I want to use a user agent detection PHP script to detect the platform, and switch stylesheets accordingly. Is there any way to do that?
You might want to try out a librabry to check if its a mobile device then you can try out this library: http://code.google.com/p/php-mobile-detect/ (this also supports detecting specific OSes)
and then have code like
if($detect->isiOS()){
echo <link rel="stylesheet" type="text/css" href="iOSstyle.css" />;
}
else if ($detect->isMobile()) {
echo <link rel="stylesheet" type="text/css" href="mobile.css" />;
}
else{
echo <link rel="stylesheet" type="text/css" href="normal.css" />;
}
FYI, these libraries are dependent on the User-Agent value in the header and other headers too.
Try this (if-condition written in pseudocode because I haven't used WURLF):
<?php
if (device is mobile) {
echo "<link rel='stylesheet' type='text/css' href='mobile.css' />";
}else{
echo "<link rel='stylesheet' type='text/css' href='monitor.css' />";
?>
Put this code where you'd normally have the CSS link.
What I've done before is store the current state (mobile/desktop) in a session variable. Then you can have a "View Desktop/Mobile Version" link which would toggle the session variable. When you render each page, use an if statement on the session variable to determine which stylesheet to display. I recommend you separate this logic into a function for re-use so you don't have to edit 20 different pages when refactoring.
If you want to auto-detect mobile browsers, you can use WURLF or php-mobile-detect.