Div hiển thị/ẩn truy vấn phương tiện

Question

Tôi có thể sử dụng mã nào để chỉ hiển thị div cụ thể nếu trên chiều rộng của thiết bị di động?

Tôi có chiều rộng toàn phần 100% ở đầu màn hình, muốn nó chỉ hiển thị khi thiết bị được chỉ định là chiều rộng trên thiết bị di động.

Answer 1

Tôi không chắc chắn, ý của bạn là 'chiều rộng di động'. Nhưng trong mỗi trường hợp, CSS @media có thể được sử dụng để ẩn các phần tử trong cơ sở chiều rộng màn hình. Xem một số ví dụ:

<div id="my-content"></div> 

... và:

@media screen and (min-width: 0px) and (max-width: 400px) { 
    #my-content { display: block; } /* show it on small screens */ 
} 

@media screen and (min-width: 401px) and (max-width: 1024px) { 
    #my-content { display: none; } /* hide it elsewhere */ 
} 

Một số phát hiện sự di động là loại cứng lập trình và khá khó khăn. Cuối cùng, xem: http://detectmobilebrowsers.com/ hoặc các nguồn tương tự khác.

Answer 2

Có vẻ như bạn có thể muốn truy cập chế độ xem của thiết bị. Bạn có thể làm điều này bằng cách chèn thẻ meta này vào tiêu đề của bạn.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

http://www.w3schools.com/css/css_rwd_viewport.asp