Hướng dẫn Hiển thị/Ẩn một template hoặc nội dung dựa vào chiều rộng khung nhìn của trình duyệt

[PVS]

Hiển thị/Ẩn một template hoặc nội dung dựa vào chiều rộng khung nhìn của trình duyệt

Bài viết này sẽ hướng dẫn về cách hiển thị/ẩn một template hoặc thậm chí cả nội dung cho một thiết bị di động.

Đầu tiên hiển thị template cho thiết bị di động, mở template bạn muốn đưa nội dung vào và đặt đoạn code này vào nơi bạn muốn hiển thị template bạn muốn gọi đến.

<div class="XFmobileShow">
<xen:include template=" Template To Show Only On Mobile " />
</div>

Nếu bạn chỉ muốn hiển thị nội dung trực tiếp, thay vì gọi đến một template khác, chỉ cần sử dụng đoạn code sau đây để thay thế.

<div class="XFmobileShow">
Put some content to display here.
</div>

Sau đó vào template extra.css và dán đoạn code này vào:

   .XFmobileShow { display: none;}

   @media only screen
   and (min-device-width : 300px)
   and (max-device-width : 743px)
   {
   .mobileShow { display: inline;}
   }

Lưu lại và thoát.

Bây giờ bạn đang hiển thị nội dung chỉ có thiết bị di động mới có thể xem!

Ok, tiếp theo bạn chỉ muốn hiển thị nội dung cho một thiết bị không phải là di động vì nó quá rộng cho màn hình thiết bị di động? Đây là cách làm.

Trước tiên, mở template bạn muốn đưa nội dung vào và đặt đoạn code này vào nơi bạn muốn hiển thị template bạn muốn gọi đến.

<div class="XFmobileHide">
<xen:include template=" Template To Hide Only On Mobile " />
</div>

Nếu bạn chỉ muốn hiển thị nội dung trực tiếp, thay vì gọi đến một template khác, chỉ cần sử dụng đoạn code sau đây để thay thế.

<div class="XFmobileHide">
Put some content here
</div>

Sau đó vào template extra.css và dán đoạn code này vào:

   .XFmobileHide { display: inline;}
 
@media only screen
   and (min-device-width : 300px)
   and (max-device-width : 743px){
   .XFmobileHide { display: none;}
   }

Lưu lại là xong.

Bạn hiện đang hiển thị nội dung mà thiết bị di động không thể xem!

Chúc các bạn thành công.

Nguồn: xenforo.com​