使用Javascript，如何检测浏览器是否在平板电脑设备上与手机上运行？(Using Javascript, how can I detect whether the browser is runn

使用Javascript，如何检测浏览器是否在平板电脑设备上与手机上运行？(Using Javascript, how can I detect whether the browser is running on a tablet device vs a phone?)

我有一个Web应用程序，供台式机，平板电脑和手机上的浏览器使用。 在平板电脑和台式机上使用时，工具栏（用HTML制作）需要16 x 16的按钮，然后是手机上的48 x 48按钮。 原因是16 x 16在桌面和平板电脑上的尺寸不错，但在手机（iPhone 4 / 4s等）上太小了。 桌面和平板电脑上的48 x 48太大了，但在我们测试过的手机上却非常完美。

如何使用Javascript对此进行必要的检测？

我想，检测以英寸或毫米为单位的物理屏幕尺寸将是一个很好的方法。 这可能来自浏览器吗？ 我已经看到一些关于以像素为单位检测屏幕分辨率的信息，但对我来说这似乎有缺陷，因为手机和平板电脑之间的分辨率边界模糊不清。

从浏览器内部检测平板电脑最可靠的方法是什么？

我们正在使用iPad 2，Android平板电脑和Android模拟器进行测试。

I have a web application that is being used by browsers on desktop, tablet and phone. A toolbar (made in HTML) when used on tablet and desktop needs to have buttons that are 16 x 16, and then 48 x 48 on phones. The reason for this, is that 16 x 16 comes up as a good size on the desktop and tablet, but too small on phones (iPhone 4/4s, etc). 48 x 48 is too big on desktop and tablet, but perfect on the phones we've tested.

How can I do the necessary detection for this using Javascript?

I imagine that detecting the physical screen size in inches or millimeters would be a good way to go. Is this possible from within the browser? I've seen some information about detecting screen resolutions in pixels, but to me that seems flawed because the resolution boundaries between phone and tablet are blurring.

What is the most reliable method for detecting a tablet from inside the browser?

We are testing using an iPad 2, Android tablet and the Android Emulator.

最满意答案

CSS3媒体查询可以很好地识别设备宽度（意味着屏幕宽度），并且有一些有趣的技术可以用杰克米基思一直在玩的JavaScript来加入它们，他在这篇文章中讨论了他的期刊。 一般的想法是，他在媒体查询中放置了一个非呈现css规则，然后通过JavaScript检索该css值，以确定哪个媒体查询有效。 这标识了设备宽度范围，然后您可以根据您正在显示的设备类型得出结论。

Originally I thought that what I needed to know was what kind of device the web application was running on, and then I moved on to thinking that I needed to know the physical screen size of the device. I now think that it is actually the DPI of the device that is relevant.

On a low resolution device such as a desktop monitor (typically well below 150 DPI) or an iPad 2 (132 DPI), the 16 x 16 buttons is a good size, but on a high resolution device such as an iPhone with retina display (326 DPI), the 48 x 48 buttons are better suited because 16 x6 16 shows up way too small.

Using Modernizr with it's .mq() function for running media queries, you can determine the device's screen resolution with Javascript code.

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

This page has a great list of many different devices and their pixel density.