在JavaScript中检测WebKit设备的物理屏幕尺寸

Question

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

• 所有设备都适合单手(7"以下)到移动类别

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

• 后备:将不支持必要API的设备视为移动设备

题

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

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

请注意,这是关于物理尺寸,而不是像素尺寸.

Answer 1

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

超文本标记语言

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

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

CSS

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

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

将其与min-device-width和max-device-width查询结合起来，您会得到如下结果：

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

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

了解更多信息：

• MDN-CSS 媒体查询
• MDN-分辨率
• “移动化”指南
• 可变像素密度的高 DPI 图像（有些相关）

JavaScript

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

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

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

了解更多信息：

• Android Webview 参考
• MDN-Screen.width
• MDN-Screen.height
• devicePixelRatio解释

Answer 2

更好地使用CSS

@media screen and (max-width: 672px){
    //your code for mobile category
}
@media screen and (min-width: 672px){
    //your code for desktop category
}