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

问题描述

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

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

回退：将不支持必要API的设备视为移动设备

问题

• 我可以使用哪些相关的JavaScript和CSS API来检测屏幕物理尺寸？请注意，这些API不需要在旧版浏览器中支持，因为有安全的后备

Firefox支持是可选的 - 如果他们已经有兼容的API。 / p>

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

解决方案

有没有直接方式获得屏幕尺寸（英寸），但有一些解决方法，使用屏幕密度来找到设备大小。这不是完美的，但你不需要真正需要知道的确切大小5有效数字。此外，通常最好只使用像素值IMO。

HTML

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

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媒体查询
• 
  
• MDN-分辨率


• 移动指南


• 用于可变像素密度的高DPI图像（有些相关）






Javascript





您可以使用 window.devicePixelRatio 屏幕密度。从 Android的WebView参考：




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




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





有关详细信息：






• Android Webview参考


• MDN - Screen.width


• MDN - Screen.height


• devicePixelRatio 说明





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

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

• Treat other devices as desktop devices

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

Question

• Which related JavaScript and CSS APIs I could use to detect the screen physical dimensions? Please note that these APIs do not need to be necessarily supported in older browsers, as there is safe fallback. Also, I don't care about legacy desktop browsers either.

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

Please note that this is about physical dimensions, not pixel dimensions.

解决方案

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.

HTML

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).

CSS

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
}

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
}

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.

For more information:

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

Javascript

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

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.

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).

For more information:

• Android Webview Reference
• MDN - Screen.width
• MDN - Screen.height
• devicePixelRatio Explanation

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