1

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

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

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

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

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

4

3 回答 3

2

CSS3 媒体查询非常适合识别设备宽度（即屏幕宽度），并且有一些有趣的技术可以使用 JavaScript 与它们挂钩，Jeremy Keith 一直在玩弄这些技术，他在他的日记中的这篇文章中讨论了这些技术。一般的想法是，他在媒体查询中放置一个非渲染 css 规则，然后通过 JavaScript 检索该 css 值以确定哪个媒体查询有效。这确定了设备宽度范围，然后您可以从中得出关于您正在显示的设备类型的结论。

于 2012-05-11T03:09:31.987 回答
1

媒体查询解决方案是一个很好的解决方案，但如果您不想将 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;
}

逻辑是宽度大于高度的设备的默认方向很可能是平板电脑而不是手机设备。

为了使其更加准确，您应该计算屏幕宽度与高度的比率并确保它超过某个阈值，以使假设更加准确，并允许您添加更多逻辑以使其更加准确。

于 2012-09-26T06:46:30.293 回答
0

最初我认为我需要知道 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)");

此页面包含许多不同设备及其像素密度的大量列表。

于 2012-05-15T00:04:49.500 回答