Vấn đề
Trong 1 số trường hợp các bạn thiết kế giao diện cho trang project của mình với phiên bản mobile thì Các bạn có thể muốn ẩn đi 1 số thành phần như những link liên kết chỉ dành cho mobile và bạn không muốn nó hiển thị trên giao diện PC.
Cách làm
Khi đó các bạn chỉ cần thêm dòng code sau
- Chỉ hiển thị trên mobile, không trên PC: <div class="mobile">thành phần muốn ẩn</div>
- Chỉ hiển thị trên PC không trên mobile, tablet: <div class="computer">thành phần muốn ẩn</div>
Mình có sử dụng nó ở ngay ngoài trang chủ của Sonako với Template:Notice
Kỹ thuật
Ở đây mình chỉ sử dụng 1 code css nhỏ để ẩn hiển thị dựa vào độ phân giải màn hình của khách. Breakpoint mình sử dụng ở đây là 1083px.
Lưu ý
Nếu điện thoai, tablet sử dụng giao diện di động của wikia thì sẽ bị hiện ẩn vì ở giao diện này Wikia tự động loại bỏ tất cả các inline-css và custom css do mình thêm vào Sonako.
Nếu điện thoại load wiki ở chế độ Full site thì không vấn đề gì. Ẩn sẽ hoạt động như bình thường.
Thế nên cái "Chỉ hiển thị trên pc mà ko load trên mobile" cũng hơi thọt thọt :v