使用javascript檢測手機/平板電腦/網絡客戶端

Question

我試圖檢測最終用戶是在手機，平板電腦還是個人電腦上

我已經谷歌搜索了一段時間，顯然沒有簡單的解決方案。

好吧，我想我不應該使用Resolution，因為現在有些平板電腦具有驚人的分辨率。

我不應該依賴方向，因為windows8筆記本電腦可以像平板電腦一樣旋轉。 （響應式設計對我目前的項目來說太難了）

我一直在嘗試使用UserAgent（認為它也有它的缺點），但是無法讓它工作，下面是我用來區分手機/平板電腦和PC的不同版本的聯合，他們只是不工作和我不知道為什么

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

是的，您不應該依賴於解決方案或方向。 但基於em的媒體查詢呢？

要使用javascript讀取媒體查詢的結果，您可以嘗試向css添加媒體查詢，以向頁面添加不可見內容：

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

然后通過javascript閱讀內容：

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

然后確定要加載的內容：

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

Answer 2

用戶代理非常不可靠，實際上可能被客戶偽造。 我建議關注特定功能而不是特定設備。 Modernizer是一個庫，可用於檢測客戶端設備上是否有可用的功能。 這將允許您檢測是否有可用的本地存儲等內容。 如果您對響應式Web設計而不是設備/客戶端特定功能感興趣，可以使用Twitter的Bootstrap等庫。 在Scaffolding頁面的底部，它甚至還有一些功能可以檢測手機與平板電腦和桌面，但我相信它是基於分辨率。

- 要添加 -

我還想強調一下，你應該問問自己為什么你真正關心用戶所使用的設備。 檢測您關注的特定功能比檢測所有可用功能要容易得多。

Answer 3

我建議查看媒體查詢和<viewport>標記。

關於響應式設計背后的思想過程的一些優秀文章。

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

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

問題仍然存在，你想要完成什么？

Answer 4

快速回答為什么代理匹配對給定列表不起作用：“Android”不在返回的（代理）字符串中！ 假設沒有給定的字符串是正確的並且說謊者比比皆是。

我已經發布了測試代碼證明了android案例。