dynamically load ratchet android/iPhone css themes based on the device

Question

I am looking for any lightweight, expressive, intuitive, or eloquent way to select CSS themes dynamically for the Goratch library.

I would love something from AngularJs, such as ng-include if etc.

CDN links

http://cdnjs.com/libraries/ratchet

Answer 1

I went with this option. If you're running PHP

function userAgent() {
    $iPod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
    $iPhone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $iPad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
    $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");

    if($iPad||$iPhone||$iPod) {
        return 'ios';
    } else if($android) {
        return 'android';
    } else {
        return 'pc';
    }
}

Then something like:

<?php if(userAgent() == 'android') { ?>
    <link rel="stylesheet" href="/web/css/ratchet-theme-android.min.css">
<?php } else { // etc...?>
    <link rel="stylesheet" href="/web/css/ratchet-theme-ios.min.css">
<? } ?>