Cách kiểm tra điện thoại có JavaScript hay không?

Nếu bạn đang tìm kiếm giải pháp phía máy khách để phát hiện thiết bị di động, quá trình tìm kiếm của bạn sẽ dừng tại đây. -]. Có các thuộc tính để phát hiện điều này ở phía máy khách bằng cách sử dụng JavaScript

Hai phương pháp phát hiện xem thiết bị hiện tại có phải là thiết bị di động hay không được liệt kê bên dưới

1. Bằng cách sử dụng cửa sổ JavaScript. phương thức matchMedia[]
2. Bằng cách sử dụng bộ điều hướng. thuộc tính userAgent

Cả hai đều đang sử dụng các phương thức cơ bản của JavaScript để tạo mã phát hiện thiết bị di động

1] Bằng cách sử dụng cửa sổ JavaScript. phương thức matchMedia[]

Phương pháp này là phương pháp tốt nhất so với phương pháp sử dụng trình điều hướng JavaScript. đại lý người dùng. Bởi vì userAgent là một cài đặt có thể được cấu hình bởi người dùng cuối. Họ có thể thay đổi nó

phương tiện truyền thông. html

ví dụ nhanh

function isMobileDevice[] {
	return window
		.matchMedia["only screen and [max-width: 760px]"].matches;
}
if [isMobileDevice[]] {
	document.write["Detected device is a mobile."];
} else {
	document
		.write["Detected device is not a mobile."];
}

Phương thức tùy chỉnh JavaScript matchMedia[] được sử dụng để thực hiện việc phát hiện thiết bị di động này

Nó chấp nhận một chuỗi truy vấn phương tiện và trả về một đối tượng. Đối tượng này sẽ chứa thuộc tính phương tiện của thiết bị hiện tại và mức độ liên quan của nó

Sau đó, đối tượng này được sử dụng để tìm sự trùng khớp giữa thuộc tính phương tiện của thiết bị hiện tại với truy vấn phương tiện được thông qua

Chương trình này gửi truy vấn phương tiện chứa độ rộng tối đa của thiết bị di động dự kiến ​​sẽ có

Nếu các thuộc tính màn hình phương tiện của thiết bị hiện tại khớp với đối số này, thì hàm JavaScript này sẽ trả về giá trị boolean true

Xem bản trình diễn

Ảnh chụp màn hình này được lấy từ máy tính của tôi để in kết quả của ví dụ nhanh ở trên

Phương tiện phù hợp với CSS

Nó cũng có thể được thực hiện bằng CSS thay vì JavaScript. Thực hiện theo các bước dưới đây để thực hiện điều này bằng CSS

• Giữ hai thông báo có thể có trong phần đánh dấu HTML với  style='display. không ai'
• Viết phần truy vấn phương tiện CSS với màn hình @media và [chiều rộng tối đa. 600px]
• Hiển thị và ẩn phần tử thông báo giao diện người dùng phù hợp theo chiều rộng màn hình

How to Detect Mobile Device using JavaScript




    Detected device is a mobile.
    Detected device is not a mobile.

2] Bằng cách sử dụng một bộ điều hướng. thuộc tính userAgent

Phương pháp thay thế là kiểm tra userAgent hiện tại để phát hiện xem đó có phải là thiết bị di động không

Hàm isMobileDevice[] trong ví dụ bên dưới thực hiện kiểm tra với mẫu biểu thức chính quy. Regex chứa các giá trị có thể có nhất của userAgent của thiết bị di động

Chúng tôi đã sử dụng khớp mẫu biểu thức chính quy cho tiện ích xác thực email JavaScript

Tập lệnh so sánh thuộc tính userAgent của thiết bị hiện tại với mẫu. Nếu tìm thấy kết quả khớp, thì hàm này trả về true để in kết quả phù hợp

hoa tiêu. html

How to Detect Mobile Device using JavaScript


    How to Detect Mobile Device using JavaScript
    
Note: Browser users can change value of "userAgent" via UA
        spoofing. So be aware of that and do not use this feature to
        provide a critical function of your website.
    

Ghi chú. Người dùng trình duyệt có thể thay đổi giá trị của “userAgent” thông qua giả mạo UA. Vì vậy, hãy lưu ý điều đó và không sử dụng tính năng này để cung cấp chức năng quan trọng cho trang web của bạn

Để phát hiện xem người dùng có đang sử dụng trình duyệt của thiết bị di động hay không, chúng tôi có một số phương pháp. Ưu tiên nhất là một vài trong số họ.  

Ví dụ 1. Ví dụ này đi qua danh sách các thiết bị và kiểm tra xem userAgent có khớp với bất kỳ thiết bị nào không.  

html

    GeeksforGeeks

h11

5

=2>7

=2>9

=2    1

=2    3

"color:green;"8____9_______5

=2    7

"color:green;"8    9

"color:green;"8GeeksforGeeks1

        9

đầu ra

JavaScript Phát hiện trình duyệt di động

Ví dụ-2. Sử dụng “cửa sổ. định hướng"

html

    GeeksforGeeks

h11