Cách dễ nhất để xác định xem người dùng có đang sử dụng thiết bị di động hay không

Question

Tôi đang hiển thị thanh thông báo trên trang web của mình, và thẳng thắn, nó không hoạt động tốt khi trên thiết bị di động. Tôi muốn hiển thị thanh CHỈ dành cho người dùng máy tính để bàn.

Cách dễ nhất để xác định xem người dùng đang ở trên máy tính để bàn hay trên thiết bị di động là gì?

Answer 1

Kiểm tra này http://detectmobilebrowsers.com/

Work for Javascript, jQuery, vv

Answer 2

Một kiểm tra user agent là "dễ nhất", mặc dù bạn có thể dễ dàng sử dụng CSS3 media queries

Dưới đây là một ví dụ để kiểm tra iphone, android và blackberry; bạn có thể dễ dàng thêm các trình duyệt di động khác.

var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false; 

Answer 3

tôi thấy rằng nó là tốt nhất để sử dụng tính năng phát hiện. Sử dụng Modernizr để phát hiện xem đó có phải là thiết bị cảm ứng hay không. Bạn có thể làm những việc như:

var mousedown = 'mousedown'; 

if (Modernizr.touch) { 
    mousedown = 'touchstart'; 
} 

$('.foo').on(mousedown, handleMouseDown); 

Và sau đó sử dụng CSS Media Truy vấn để xử lý chiều rộng màn hình (và cũng dễ dàng phát hiện chiều rộng màn hình bằng javascript). Bằng cách đó, bạn có thể xử lý chính xác các thiết bị cảm ứng có màn hình lớn hoặc thiết bị không chạm với màn hình nhỏ.

Answer 4

Nếu bạn sử dụng modernizr. một lớp "no-touch" sẽ được thêm vào phần tử. Bạn có thể ẩn thanh theo mặc định và thêm quy tắc css để hiển thị thanh nếu lớp "no-touch" tồn tại. Ví dụ:

mặc định:

.bar{display:none;}

máy tính để bàn:

.no-touch .bar{display:block;}