Hướng dẫn Hiện/ẩn template hoặc nội dung dựa vào chiều rộng của khung nhìn 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,782
Được Like
11,078
Hiện/ẩn template hoặc nội dung dựa vào chiều rộng của khung nhìn trình duyệt

Đầu tiên chỉ hiển thị một template cho điện thoại di động, mở template mà bạn muốn bao gồm nội dung và đặt đoạn code sau vào nơi bạn muốn hiển thị template bạn muốn gọi tới.
Mã:
<div class="XFmobileShow">
<xen:include template=" Template To Show Only On Mobile " />
</div>

Nếu bạn 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>

Lưu template của bạn và thoát.

Bây giờ đến template extra.css và dán đoạn code sau đâ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 và thoát.

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

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

Đầu tiên, mở template mà bạn muốn bao gồm nội dung và đặt đoạn code sau vào nơi bạn muốn hiển thị template mà bạn muốn gọi tới.
Mã:
<div class="XFmobileHide">
<xen:include template=" Template To Hide Only On Mobile " />
</div>

Nếu bạn 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>

Lưu template của bạn và thoát.

Bây giờ đến template extra.css và dán đoạn code sau đâ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 và thoát.

Bây giờ bạ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