檢測手機與平板電腦與桌面Javascript

Question

我遇到了一些使用Javascript確定瀏覽器類型的問題。 我目前的方法是捕獲屏幕寬度和高度，並根據像素大小確定瀏覽器的類型。

我想我可以假設768以下的任何屏幕寬度都是移動的，任何低於1024平板電腦的東西，以及任何高於桌面的東西。

我已經開始測試一些我可以實際操作的設備，結果有很大不同。 例如，在Android（Droid Bionic確切但無關緊要）上，無論設備處於橫向模式還是縱向模式，其返回寬度為980。 這比我想象的要高得多。

目前我使用document.documentElement.clientWidth來確定寬度，但我也嘗試過其他方法，例如window.innerWidth。

我想我想要解決的問題是多次被問過的問題，我覺得我有一個非常明確的答案。 顯然，可能是時候刷新正確的瀏覽器/設備檢測。 那么確定我所使用的設備的實際大小的最有效方法是什么？

更新：似乎移動瀏覽器實際上是在自己決定如何顯示我的應用程序。 事實上它們是，但有一種方法可以阻止它。 見答案。 幸運的是，這意味着我們習慣的標准特征檢測方法仍然是確定您正在使用的設備的最佳方法。

Answer 1

Per Dagg Nabbit對此問題的評論：

似乎移動瀏覽器會自行決定網站的顯示方式。 這通常意味着獲取網站的桌面版本並縮小以適應屏幕上的內容。 對於90％的互聯網而言，這是必要的，否則移動瀏覽體驗將是可怕的。 對於響應式網站而言，這並不好，因為在大多數情況下，我們有非常具體的元素，必須根據正在查看網站的設備的分辨率進行更改。 那么我們如何阻止瀏覽器這樣做呢？

通過使用視口元標記。 標准標簽看起來像這樣：

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

但是有很多不同的方法可以根據您的需求進行自定義。 一個很好的參考是https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag