title: Detect device and swap the CSS file - jQuery
body: <p>My web application target to major Smartphones and I need to change the CSS file according to device (if there are issues in the UI need to hit them), and I’m planning swap CSS using following jQuery. Just want to know whether is it a best practice and good in performance?</p>
  
  <pre><code>&lt;link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" /&gt;
  &lt;link rel="stylesheet" href="general.css" type="text/css" /&gt;
  
  &lt;script type="text/javascript"&gt; 
      $(document).ready(function() {
  
          //  css file based on the device
          var controlCss;
          //  get the device agent and conver to lover case
          var deviceAgent = navigator.userAgent.toLowerCase();
  
          if(deviceAgent.match(/android/i)){
              controlCss = "android.css";
              $(".cssLink").attr("href", controlCss);
          }
          else if(deviceAgent.match(/webso/i)){
              controlCss = "webOS.css";
              $(".cssLink").attr("href", controlCss);
          }
          else if(deviceAgent.match(/iphone/i)){
              controlCss = "iphone.css";
              $(".cssLink").attr("href", controlCss);
          }
          else if(deviceAgent.match(/ipod/i)){
              controlCss = "ipad.css";
              $(".cssLink").attr("href", controlCss);
          }
          else if(deviceAgent.match(/blackberry/i)){
              controlCss = "bb.css";
              $(".cssLink").attr("href", controlCss);
          }
          else {
              controlCss = "basic.css";
              $(".cssLink").attr("href", controlCss);
          }
      }); 
  &lt;/script&gt;
  </code></pre>