使用Javascript，如何檢測瀏覽器是否在平板電腦設備上與手機上運行？

Question

我有一個Web應用程序，供台式機，平板電腦和手機上的瀏覽器使用。 在平板電腦和台式機上使用時，工具欄（用HTML制作）需要有16 x 16的按鈕，然后是手機上的48 x 48按鈕。 原因在於，16 x 16在桌面和平板電腦上的尺寸不錯，但在手機上卻太小（iPhone 4 / 4s等）。 桌面和平板電腦上的48 x 48太大了，但在我們測試的手機上卻非常完美。

如何使用Javascript對此進行必要的檢測？

我想，檢測以英寸或毫米為單位的物理屏幕大小是一個很好的方法。 這可能來自瀏覽器嗎？ 我已經看到一些關於以像素為單位檢測屏幕分辨率的信息，但對我來說這似乎有缺陷，因為手機和平板電腦之間的分辨率邊界模糊不清。

從瀏覽器內部檢測平板電腦最可靠的方法是什么？

我們正在使用iPad 2，Android平板電腦和Android模擬器進行測試。

Answer 1

CSS3媒體查詢可以很好地識別設備寬度（意思是屏幕寬度），並且有一些有趣的技術可以用傑克米基思一直在玩的JavaScript來加入它們，他在這篇文章中從他的期刊中進行了討論。 一般的想法是，他在媒體查詢中放置了一個非呈現css規則，然后通過JavaScript檢索該css值，以確定哪個媒體查詢有效。 這標識了設備寬度范圍，然后您可以根據您正在顯示的設備類型得出結論。

Answer 2

媒體查詢解決方案是一個很好的解決方案，但如果您不想將CSS集成到解決方案中並且如您所說的那樣，使用JS（僅限），您應該能夠使用JavaScript來檢測設備是否是平板電腦vs 。 一部手機。 這可以通過使用window.orientation結合屏幕寬度與高度的比率來檢測默認方向來完成。

if (window.oriention == 0){            // this is the device's default orientation
    if (screen.width > screen.height) //means  default orientation is landscape
        isPhoneFormFactor = false;
}

邏輯是，寬度大於其高度的設備的默認方向很可能是平板電腦，而不是手機設備。

為了使其更加准確，您應該計算屏幕寬度與高度的比例，並確保它超過某個閾值，以使假設更准確，並允許您添加更多邏輯，甚至更多。

Answer 3

最初我認為我需要知道的是Web應用程序運行的是什么類型的設備，然后我開始認為我需要知道設備的物理屏幕大小。 我現在認為它實際上是設備的DPI是相關的 。

在低分辨率設備（如桌面顯示器（通常遠低於150 DPI）或iPad 2（132 DPI））上，16 x 16按鈕尺寸合適，但在高分辨率設備上，如帶有視網膜顯示屏的iPhone（ 326 DPI），48 x 48按鈕更適合，因為16 x6 16顯示太小。

使用Modernizr及其運行媒體查詢的.mq()函數，您可以使用Javascript代碼確定設備的屏幕分辨率。

var isHighResolutionDisplay = Modernizr.mq("screen and (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 250dpi)");

此頁面列出了許多不同設備及其像素密度。