Phát hiện thiết bị và trao đổi tệp CSS - jQuery

Question

Ứng dụng web của tôi nhắm mục tiêu đến Điện thoại thông minh chính và tôi cần thay đổi tệp CSS theo thiết bị (nếu có vấn đề trong giao diện người dùng cần nhấn) và tôi đang lập kế hoạch hoán đổi CSS sử dụng jQuery sau đây. Chỉ muốn biết liệu đó có phải là phương pháp hay nhất và hiệu quả tốt không?

<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" /> 
<link rel="stylesheet" href="general.css" type="text/css" /> 

<script type="text/javascript"> 
    $(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); 
     } 
    }); 
</script> 

Answer 1

1.Thực hành tốt nhất?

Phụ thuộc vào những gì bạn nghĩ là thực hành tốt nhất, cũng là những gì thực hành tốt nhất là trong ngữ cảnh của ứng dụng và công ty của bạn. Một điều khiến tôi nghĩ đến là: Bạn có thể đảm bảo tất cả các trang của bạn sẽ sử dụng jQuery không? Nếu vậy thì tôi nghĩ đây là một cách tiếp cận tốt để đạt được những gì bạn đang có. Một giải pháp thay thế sẽ là thực hiện phía máy chủ này, điều đó sẽ đảm bảo hiệu suất tốt nhất nhưng có thể có các lý do khác khiến bạn không muốn thực hiện điều này (có thể bạn không có quyền truy cập vào mã phía máy chủ hoặc bạn muốn duy trì hầu hết chức năng trong tay của các lập trình viên front-end).

2. Có hiệu quả tốt không?

Câu trả lời ngắn gọn là không. Ngày đầu cần tải trọng 100K + của jQuery để chèn CSS trên trang. Cách bạn tiếp cận vấn đề tại thời điểm này là đợi toàn bộ trang (và tất cả các phụ thuộc) tải trước khi thêm kiểu cho nó. Điều này sẽ tạo ra một 'nhảy' đáng chú ý giữa khi trang được hiển thị lúc đầu (không có kiểu) và khi các kiểu được tải và mọi thứ di chuyển xung quanh.

Tải phía máy chủ CSS sẽ loại bỏ điều này, nhưng tôi nghĩ bạn vẫn có thể thực hiện việc này trong giao diện người dùng và giữ phần lớn mã cơ sở của bạn bằng JavaScript giúp duy trì dễ dàng hơn. Để làm điều này, loại bỏ các bit mà bạn chờ đợi cho các tài liệu được nạp trước khi gọi lên tập tin CSS của bạn:

<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" /> 
<link rel="stylesheet" href="general.css" type="text/css" /> 

<script type="text/javascript"> 

    // No need to wait for document to load 
    // $(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); 
     } 

     // etc.. 

    // }); 
</script> 

Tiếp tục hoàn thiện hiệu suất mà bạn có thể sử dụng một giải pháp mà không phụ thuộc vào jQuery, thay vì

$(".cssLink").attr("href", controlCss); 

bạn có thể thêm #cssLink tới phần tử stylesheet <link> và sử dụng DOM để làm như vậy:

document.getElementById("cssLink").setAttribute("href", controlCss); 

này wo uld làm cho mã của bạn trông giống như sau:

<link rel="stylesheet" href="basic.css" type="text/css" css="cssLink" id="cssLink" /> 
<link rel="stylesheet" href="general.css" type="text/css" /> 

<script type="text/javascript"> 

     // .. blah blah .. 

     if(deviceAgent.match(/android/i)){ 
      controlCss = "android.css"; 
      // use a solution that does not need jQuery 
      document.getElementById("cssLink").setAttribute("href", controlCss); 
     } 

     // etc.. 

</script> 

Bằng cách này bạn sẽ loại bỏ phụ thuộc vào 100K cộng với tải trọng của jQuery trước khi bạn có thể áp dụng biểu định kiểu cho trang.

UPDATE:

Nó cũng có thể áp dụng quy tắc CSS dựa trên kích thước màn hình chứ không phải là thiết bị.

Bạn đã xem @media queries chưa?