I use CustomCSS as it works in both Evo and Revo:
<?php
/* Snippet Title: CustomCSS */
$output = '';
$cssBase = $modx->config['site_url'] . 'one/css/'; /* or wherever you keep your css files */
/* array of browser agent names and their respective .css filenames */
$browserArray = array(
'iPhone' => 'mobile-screen.css',
'SymbianOS/9.1' => 'mobile-screen.css',
'anotherbrowser' => 'mobile-screen.css',
'yetanother browser' => 'mobile-screen.css'
);
/* see if we recognize one */
foreach ($browserArray as $key => $value) {
if (strpos($_SERVER['HTTP_USER_AGENT'],$key)) {
$output .= $cssBase . $value;
break;
}
}
/* if we didn't find one, use the default css file */
if ($output == '') {
$output = $cssBase . 'screen.css';
}
return $output;
It's called in the Template:
<link href="[[!CustomCSS]]" rel="stylesheet" type="text/css" />
Note: I use a CSS reset file that resets all the CSS attributes to zero, then invokes the CSS file for whatever user agent I want to use.
Refer to Ethan Marcotte's "Responsive Web Design" to find out how to style your main template so that, using CustomCSS, it responds to different browser screens rather than redirect to a mobile only site.