Android/ユーザーエージェントでCSSを切り替え-javascript利用 - kobapan @ wiki

スマートフォン対応でよく使われるような、画面サイズでの振り分けがダメでも、これならいけた。

navigator.userAgentの文字列中に、iPhone、Androidなどの文字がある場合、
headタグの最後にlinkタグを挿入、smart.cssを追加し、
style.cssの対応部分を上書くことでスマートフォン用の画面にする。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
<link rel="stylesheet" href="style.css">
 
<script>
$(function(){
    var _UA = navigator.userAgent;
    if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPad') > 0 || _UA.indexOf('iPod') > 0 ||
        _UA.indexOf('android') > 0 || _UA.indexOf('Android') > 0 ||
        _UA.indexOf('BlackBerry') > 0 || _UA.indexOf('windows Phone') > 0 ||
        _UA.indexOf('NOKIA') > 0 || /Mobile.*Firefox/.test(_UA))
    {
        $('head').append('<link>');
        $('head').children(':last').attr({rel:'stylesheet',href:'smart.css'}); 
    }
});
</script>
 

参考

jQueryでlinkタグを追加して外部CSSを読み込む
POSTORO: jQueryで動的に CSSファイルを追加する方法