我有一个台式机，平板电脑和手机上的浏览器正在使用的Web应用程序。在平板电脑和台式机上使用的工具栏（HTML格式）需要具有16 x 16的按钮，然后在手机上具有48 x 48的按钮。这样做的原因是，在台式机和平板电脑上，16 x 16尺寸合适，但在手机（iPhone 4 / 4s等）上尺寸太小。 48 x 48在台式机和平板电脑上太大了，但在我们测试过的手机上却很完美。
如何使用JavaScript对此进行必要的检测？
我想检测以英寸或毫米为单位的物理屏幕尺寸将是一个好方法。是否可以从浏览器内部进行？我已经看到了一些有关以像素为单位检测屏幕分辨率的信息，但是对我来说，这似乎是有缺陷的，因为手机和平板电脑之间的分辨率界限越来越模糊。
从浏览器内部检测平板电脑最可靠的方法是什么？
我们正在使用iPad 2，Android平板电脑和Android模拟器进行测试。
最佳答案
CSS3媒体查询可很好地用于识别设备宽度（即屏幕宽度），并且有一些有趣的技术可与JavaScript结合使用，Jeremy Keith一直在与JavaScript交缠，他在自己的this post期刊中对此进行了讨论。总体思路是，他在媒体查询中放入了非渲染的CSS规则，然后通过JavaScript检索了该CSS值，以确定哪个媒体查询有效。这样可以确定设备的宽度范围，然后您可以从中得出关于要显示哪种设备的结论。