在 JavaScript 中检测 WebKit 设备的物理屏幕尺寸 [英] Detecting physical screen dimensions of WebKit devices in JavaScript

问题描述

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

I'd like to categorize devices by screen width in client-side JavaScript code

• 适合一只手(少 7 英寸)的所有设备都适合移动类别

• All devices fitting to one hand (7" less) to mobile category

将其他设备视为桌面设备

Treat other devices as desktop devices

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

Fallback: Treat devices which do not support necessary APIs as mobile devices

问题

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

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

Firefox support is optional - if they have compatible APIs already.

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

推荐答案

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

There's no direct way to get the screen size in inches, but there are workarounds that use screen density to find the device size. It's not perfect, but you don't really need to know the exact size to 5 significant figures. Also, it is normally better to simply use pixel values, IMO.

制作一个测试 div，然后查看显示的像素数以获得像素密度，然后在计算中使用它.这应该有效，假设您的浏览器/操作系统配置正确(它在 这个问题 但它在我的电脑上不到半英寸).

Make a test div, and then see the number of pixels displayed to get the pixel density, then use that in your calculations. This should work, assuming that your browser/OS are configured properly (it didn't work in the this question but it was within half an inch on my computer).

这是 100% 错误的.CSS 中的英寸/厘米测量值不是基于实际的物理测量值.它们基于精确转换(1 英寸 = 96 像素，1 厘米 = 37.8 像素).抱歉.

检测物理屏幕大小的最佳方法是使用 CSS 媒体查询.min-resolution 和 max-resolution 查询可用于获取 dpi 或 dpcm 的分辨率:

The best way to detect physical screen size is to use CSS media queries. The min-resolution and max-resolution queries can be used to get the resolution in either dpi or dpcm:

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

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

Combining it with the min-device-width and max-device-width queries, you get something like:

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

问题是，如果您想定位 7 英寸设备，您必须将多种分辨率和相应的宽度组合在一起，这可能会变得复杂.

The problem is that if you want to target 7 inch devices, you'd have to have many resolutions and corresponding widths that go together, which could get complicated.

更多信息:

• MDN-CSS 媒体查询
• MDN- 分辨率
• Mobifying"指南
• 高 DPI 图像用于可变像素密度(有些相关)

• MDN- CSS Media Queries
• MDN- Resolution
• "Mobifying" Guide
• High DPI Images for Variable Pixel Densities (Somewhat Related)

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

You can use window.devicePixelRatio to determine the screen density. From Android's WebView Reference:

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

The window.devicePixelRatio DOM property. The value of this property specifies the default scaling factor used for the current device. For example, if the value of window.devicePixelRatio is "1.0", then the device is considered a medium density (mdpi) device and default scaling is not applied to the web page; if the value is "1.5", then the device is considered a high density device (hdpi) and the page content is scaled 1.5x; if the value is "0.75", then the device is considered a low density device (ldpi) and the content is scaled 0.75x.

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

Then using this, you calculate the physical size by dividing this by the total number of pixels, which can be calculated with window.screen.width and window.screen.height (Don't use window.screen.availHeight or window.screen.availWidth because these only detect the available height).

更多信息:

• Android Webview 参考
• MDN - Screen.width
• MDN - Screen.height
• devicePixelRatio说明

这篇关于在 JavaScript 中检测 WebKit 设备的物理屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！