7

我想在客户端 JavaScript 代码中按屏幕宽度对设备进行分类

  • 所有设备都适合一只手（小于 7 英寸）到移动类别

  • 将其他设备视为桌面设备

  • Fallback：将不支持必要 API 的设备视为移动设备

问题

  • 我可以使用哪些相关的 JavaScript 和 CSS API 来检测屏幕物理尺寸？请注意，旧版浏览器不一定支持这些 API，因为有安全的回退。此外，我也不关心旧版桌面浏览器。

Firefox 支持是可选的 - 如果它们已经有兼容的 API。

请注意，这是关于物理尺寸，而不是像素尺寸。

4

2 回答 2

3

没有直接的方法来获取以英寸为单位的屏幕尺寸，但有一些解决方法可以使用屏幕密度来查找设备尺寸。它并不完美，但您并不需要知道 5 位有效数字的确切大小。此外，通常最好简单地使用像素值，IMO。

HTML

制作一个测试 div，然后查看显示的像素数以获得像素密度，然后在计算中使用它。这应该可以工作，假设您的浏览器/操作系统配置正确（它在这个问题中不起作用，但它在我的计算机上半英寸以内）。

编辑：这是 100% 错误的。CSS 中的英寸/厘米测量值并非基于实际的物理测量值。它们基于精确转换（1 英寸 = 96 像素，1 厘米 = 37.8 像素）。我很抱歉。

CSS

检测物理屏幕大小的最佳方法是使用 CSS 媒体查询。和查询可用于在 或 中min-resolution获取分辨率：max-resolutiondpidpcm

@media (min-resolution: 300dpi){
  // styles
}

将它与min-device-widthandmax-device-width查询结合起来，你会得到类似的东西：

@media (resolution: 326dpi) and (device-width: 640) and (device-height: 960){
    // iPhone
}

问题是，如果你想定位 7 英寸设备，你必须有许多分辨率和相应的宽度，这可能会变得复杂。

了解更多信息：

Javascript

您可以使用window.devicePixelRatio来确定屏幕密度。来自Android 的 WebView 参考：

window.devicePixelRatioDOM 属性。此属性的值指定用于当前设备的默认缩放因子。例如，如果 的值为window.devicePixelRatio“1.0”，则该设备被视为中等密度 (mdpi) 设备，并且默认缩放不适用于网页；如果值为“1.5”，则该设备被视为高密度设备 (hdpi)，页面内容缩放 1.5 倍；如果该值为“0.75”，则该设备被视为低密度设备 (ldpi)，内容被缩放 0.75 倍。

然后使用它，您可以通过将其除以总像素数来计算物理尺寸，这可以用window.screen.widthand来计算window.screen.height（不要使用window.screen.availHeight，或者window.screen.availWidth因为它们只检测可用高度）。

了解更多信息：

于 2014-01-02T18:07:10.897 回答
-4

更好地使用 CSS

@media screen and (max-width: 672px){
    //your code for mobile category
}
@media screen and (min-width: 672px){
    //your code for desktop category
}
于 2013-04-22T07:34:12.393 回答