CakePHP iPad layout not being loaded - ipad

Question

Ok, this is driving me somewhat nuts.
I created a mobile layout, mostly for iPads. I am using the beforeRender() function in the AppController to detect for the mobile client and switch the theme accordingly.
When I test the mobile site on my local development server using the iOS emulator, it all works perfectly fine. The theme gets loaded correctly and all. However, when I access it on the online production server, the mobile theme does not get loaded. I see the content, but without any styling.
The online test can be found here: http://www.anuragdesign.com/test/mbv
Why could that be? Any input is greatly appreciated.
Update:
Here are the relevant code pieces:
In my AppController.php
public function beforeRender() {
if($this->RequestHandler->isMobile()) {
$this->theme = 'mobile';
}
}
/lib/cake/Network/CakeRequest.php
protected $_detectors = array(
'get' => array('env' => 'REQUEST_METHOD', 'value' => 'GET'),
'post' => array('env' => 'REQUEST_METHOD', 'value' => 'POST'),
'put' => array('env' => 'REQUEST_METHOD', 'value' => 'PUT'),
'delete' => array('env' => 'REQUEST_METHOD', 'value' => 'DELETE'),
'head' => array('env' => 'REQUEST_METHOD', 'value' => 'HEAD'),
'options' => array('env' => 'REQUEST_METHOD', 'value' => 'OPTIONS'),
'ssl' => array('env' => 'HTTPS', 'value' => 1),
'ajax' => array('env' => 'HTTP_X_REQUESTED_WITH', 'value' => 'XMLHttpRequest'),
'flash' => array('env' => 'HTTP_USER_AGENT', 'pattern' => '/^(Shockwave|Adobe) Flash/'),
'mobile' => array('env' => 'HTTP_USER_AGENT', 'options' => array(
'AvantGo','DoCoMo', 'Fennec', 'iPad', 'J2ME', 'MIDP', 'NetFront', 'Nokia', 'Opera Mini', 'Opera Mobi', 'PalmOS', 'PalmSource',
'portalmmm', 'Plucker', 'ReqwirelessWeb', 'SonyEricsson', 'Symbian', 'UP\\.Browser',
'webOS', 'Windows CE', 'Windows Phone OS', 'Xiino'
)),
'requested' => array('param' => 'requested', 'value' => 1)
);
The mobile stylesheet is located in:
/app/View/Themed/mobile/webroot/css/mobile.css
and is being called in the layout file the splash page /app/View/Themed/mobile/Layouts/splash.ctp like so:
<?php echo $this->Html->css(array('reset.defaults', 'mobile', 'superfish')); ?>
Update:
debug($_SERVER['HTTP_USER_AGENT') on the online setup prodces the following output:
'Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5'

Answer 1

Fix (well sort of)
I did a few steps, which eventually seemed to fix it. The issue seemed to be that on the online production server it would try to serve the style sheet from the regular webroot folder, rather then my themed one. I have no idea as to why, but there you go.
So first of all, I duplicated all mobile stylesheets and put them in /app/webroot/css/ (vs where they should go /app/View/Themed/mobile/webroot/css/ . Then I also renamed any element which was used both in mobile and non-mobile views to make sure the mobile ones (located in /app/View/Themed/mobile/Elements) all had unique names.
That seemed to have worked, but all in all a rather in-concise solution. So if anyone has a better solution, I would love to hear.