có điều kiện hiển thị nội dung dựa trên Truy vấn phương tiện

Question

Tôi có một trang web trong phiên bản dành cho máy tính để bàn, một thanh bên được hiển thị chứa 10 đến 20 hình ảnh nhỏ. Cho đến bây giờ, trên thiết bị di động, thanh bên này chỉ đơn giản là ẩn với một display: none, là giải pháp ít hiệu quả nhất vì tất cả các hình ảnh sẽ được tải xuống.

Tôi đang tự hỏi cách tốt nhất là tắt hoàn toàn thanh bên trên thiết bị di động (không sử dụng yêu cầu AJAX riêng).

Giải pháp tốt nhất tôi có thể nghĩ ra như sau:

• Viết mã HTML của sidebar vào một biến
• thử nghiệm JavaScript chiều rộng thiết bị bằng cách kiểm tra một truy vấn phương tiện truyền thông với JavaScript (ví dụ sử dụng Modernizr.mq hoặc lâu hơn)
• nếu thử nghiệm này mang lại một thiết bị không di động, hãy viết nội dung của biến vào DOM, ví dụ bằng cách sử dụng innerHTML, jQuery.append, jQuery.prepend hoặc tương tự

Tôi biết rằng hiệu suất RWD đôi khi có thể là một chủ đề rất phức tạp và giải pháp hiệu quả nhất thường không rõ ràng. Vì vậy, bất cứ ai có thể nghĩ ra một giải pháp tốt hơn so với một trong những trình bày ở trên?

Answer 1

Nếu bạn không muốn tải hình ảnh trên thiết bị di động, thay vì đặt hình ảnh thành các thẻ <img>, bạn có thể đặt div thành chiều rộng và chiều cao mong muốn và đưa hình ảnh dưới dạng hình nền. Trong css của bạn, ẩn thanh bên theo mặc định. Sau đó, ở bất kỳ chiều rộng nào bạn cho là vượt ra ngoài thiết bị di động, hãy sử dụng truy vấn phương tiện để hiển thị thanh bên và tải hình nền trong các div.

#sidebar { 
    display: none; 
} 
#sidebar div#sidebar-img-1 { 
    width: 100px; 
    height: 100px; 
} 
/* ... */ 

@media only screen and (min-width: 480px) { 
    /* display sidebar */ 
    #sidebar { 
     display: block; 
    } 
    /* set background image for sidebar items */ 
    #sidebar div#sidebar-img-1 { 
     background-image: url("sidebar1.jpg"); 
    } 
    /* ... */ 
} 

Hạn chế là bằng cách đặt nội dung vào bảng định kiểu, bạn đang thực hiện giao dịch cho ngữ nghĩa.

Answer 2

Tôi chỉ làm một số nghiên cứu về làm thế nào để làm điều này và chạy vào điều này bằng cách nhóm sợi: https://github.com/filamentgroup/Ajax-Include-Pattern/

vẻ dễ dàng để thiết lập. Nó hoạt động giống như các truy vấn phương tiện được đặt trong thuộc tính dữ liệu.

Vì vậy, một bên bạn không muốn xuất hiện trên điện thoại di động sẽ giống như thế này:

<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside> 

Vì vậy, sidebar của bạn sẽ chỉ đến ở trên một màn hình đó là ít nhất 40ems (~ 640px) rộng. Tất nhiên bạn cũng cần tập tin javascript và để bắt đầu nó, nhưng những người nhìn khá đơn giản là tốt.