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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,803
Được Like
11,095
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.
Mã:
<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ế.
Mã:
<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:
Mã:
   .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.
Mã:
<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ế.
Mã:
<div class="XFmobileHide">
Put some content here
</div>

Sau đó vào template extra.css và dán đoạn code này vào:
Mã:
   .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​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom