Question

我有一个桌面，平板电脑和手机浏览器正在使用的网络应用程序。在平板电脑和台式机上使用时，工具栏（用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来与它们挂钩，他在this post中讨论了他的问题。日志。一般的想法是，他在媒体查询中放置了一个非呈现css规则，然后通过JavaScript检索该css值，以确定哪个媒体查询有效。这标识了设备宽度范围，然后您可以根据您正在显示的设备类型得出结论。

Answer 2

媒体查询解决方案是一个很好的解决方案，但是如果您不想将CSS集成到解决方案中并且如您所说的那样，使用JS（仅限），您应该能够使用JavaScript来检测设备是否是平板电脑与手机。这可以通过使用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)");

This page有许多不同设备及其像素密度的清单。

使用Javascript，如何检测浏览器是否在平板电脑设备上与手机上运行？

3 个答案: