Question

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

所有设备适合单手（少7英寸）到移动类别
将其他设备视为桌面设备
后备：将不支持必要API的设备视为移动设备

问题

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

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

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

Answer 1

有no direct way来获取屏幕大小（以英寸为单位），但有一些解决方法可以使用屏幕密度来查找设备大小。它并不完美，但你真的不需要知道5个有效数字的确切大小。此外，通常最好只使用像素值IMO。

HTML

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

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

CSS

检测物理屏幕大小的最佳方法是使用CSS媒体查询。 min-resolution和max-resolution查询可用于获取dpi或dpcm中的解析：

@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 Media Queries
MDN- Resolution
"Mobifying" Guide
High DPI Images for Variable Pixel Densities（有点相关）

的Javascript

您可以使用window.devicePixelRatio来确定屏幕密度。来自Android's WebView Reference：

window.devicePixelRatio DOM属性。此属性的值指定用于当前设备的默认比例因子。例如，如果window.devicePixelRatio的值为“1.0”，则设备被视为中密度（mdpi）设备，并且默认缩放不应用于网页;如果值为“1.5”，则设备被视为高密度设备（hdpi），页面内容缩放1.5倍;如果值为“0.75”，则设备被视为低密度设备（ldpi），内容缩放0.75x。

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

了解更多信息：

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
}

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

2 个答案:

HTML

CSS

的Javascript