Phát hiện điện thoại/tablet/web của khách hàng sử dụng javascript

Question

tôi đang cố gắng để phát hiện nếu người dùng kết thúc trùng với một chiếc điện thoại, một viên thuốc hoặc một pc

Tôi đã được Googling cho một thời gian, dường như không có giải pháp dễ dàng.

Tôi đoán tôi không nên sử dụng Độ phân giải, vì ngày nay một số máy tính bảng có độ phân giải tuyệt vời.

Tôi không nên dựa vào định hướng, vì máy tính xách tay windows8 chỉ có thể xoay như máy tính bảng. (và thiết kế đáp ứng quá khó cho dự án hiện tại của tôi)

Tôi đã cố gắng sử dụng UserAgent (nó cũng có nhược điểm), nhưng không thể làm việc, dưới đây là sự kết hợp của các phiên bản khác nhau trực tuyến mà tôi đang sử dụng để phân biệt điện thoại/tablet từ máy tính, họ chỉ cần không làm việc và tôi không có ý tưởng tại sao

var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry','iemobile','phone','mobile']; 
       for(i in agents) { 
        if(navigator.userAgent.toLowerCase().match('/'+agents[i]+'/i')) { 
         return true; 
        } 
       } 


if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
       return true; 
      } 

if(navigator.userAgent.match(/Android/i) 
       || navigator.userAgent.match(/webOS/i) 
       || navigator.userAgent.match(/iPhone/i) 
       || navigator.userAgent.match(/iPad/i) 
       || navigator.userAgent.match(/iPod/i) 
       || navigator.userAgent.match(/BlackBerry/i) 
       || navigator.userAgent.match(/Windows Phone/i) 
       || navigator.userAgent.match(/bada/i) 
       || navigator.userAgent.match(/Bada/i) 
       ){ 
       return true; 
      } 

Answer 1

Có, bạn không nên dựa vào độ phân giải hoặc hướng. Nhưng làm thế nào về các truy vấn phương tiện truyền thông dựa trên em?

Để đọc kết quả của truy vấn phương tiện truyền thông của bạn với javascript, bạn có thể thử thêm một truy vấn phương tiện truyền thông để css của bạn để thêm nội dung vô hình vào trang của bạn:

@media all and (max-width: 45em) { 
    body:after { 
     content: 'smallscreen'; 
     display: none; 
    } 
} 

Sau đó đọc nội dung thông qua javascript:

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); 

Sau đó, xác định những gì bạn muốn tải:

if (size.indexOf('smallscreen') !=-1) { 
    // Load some content for smaller screens. 
} 

Answer 2

User Agents là khá đáng tin cậy, và thực sự có thể được làm giả bởi khách hàng. Tôi khuyên bạn nên tập trung vào chức năng cụ thể thay vì các thiết bị cụ thể. Modernizer là thư viện có thể được sử dụng để phát hiện xem các tính năng có sẵn trên thiết bị khách hay không. Điều này sẽ cho phép bạn phát hiện xem những thứ như lưu trữ cục bộ, v.v. có sẵn không. Nếu bạn quan tâm đến một cái gì đó như Responsive Web Design thay vì thiết bị/khách hàng tính năng cụ thể, bạn có thể sử dụng một thư viện như Twitter của Bootstrap. Ở cuối trang Giàn giáo, nó thậm chí còn có một số tính năng cho phép phát hiện điện thoại so với máy tính bảng so với máy tính để bàn, mặc dù tôi tin rằng nó dựa trên độ phân giải.

--edit để add--

Tôi cũng muốn nhấn mạnh rằng bạn nên tự hỏi mình tại sao bạn thực sự quan tâm đến những gì thiết bị người dùng là trên. Nó sẽ được dễ dàng hơn nhiều để phát hiện các tính năng cụ thể mà bạn quan tâm hơn nó sẽ được để phát hiện tất cả các tính năng có sẵn.

Answer 3

Tôi khuyên bạn nên xem xét các truy vấn phương tiện và thẻ <viewport>.

Một số bài viết tuyệt vời về quy trình suy nghĩ đằng sau thiết kế đáp ứng.

http://www.html5rocks.com/en/mobile/mobifying/

http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

Vấn đề còn lại, anh đang cố gắng để thực hiện?

Answer 4

Trả lời nhanh tại sao khớp của tác nhân không hoạt động với danh sách đã cho: "Android" không nằm trong chuỗi trả về (agent)! Chỉ cần giả định rằng KHÔNG CÓ các chuỗi đã cho là chính xác và nói dối rất nhiều.

Tôi đã đăng mã thử nghiệm chứng minh trường hợp android.