在 Android 上的 Chrome 中获取物理屏幕尺寸/dpi/像素密度 [英] Getting the physical screen dimensions / dpi / pixel density in Chrome on Android

问题描述

有没有一种安全的方法可以在 Android 上的 Chrome 中获得实际正确的屏幕物理尺寸?如有必要，可以将旧版本的 Chrome 和 Android 排除在范围之外.

Is there a safe way to get the actually correct screen physical dimensions in Chrome, on Android? If necessary, old versions of Chrome and Android can be left out of scope.

关于从 javascript(或 css)获取设备的实际物理屏幕尺寸的 stackoverflow 上有许多死胡同.html api 标准化和实际浏览器实现之间似乎没有融合，更不用说浏览器实现依赖于操作系统 api，而操作系统 api 又依赖于提供正确信息的硬件.

There are numerous dead-end questions on stackoverflow about getting the actual physical screen dimensions of a device from within javascript (or css). It seems there is no convergence between html api standardization and actual browser implementations in that, not to mention the browser implementation relies on OS api's which in turn rely on hardware providing the right information.

顺便说一下，在假设当时盛行的某个像素密度时，一些先前的答案是神秘的(2011 年等)，因此毫无用处.其他与 webkit 有关，而 Chrome 闪烁可能已经取代了 chrome (?) 中的 webkit.

Some prior answers by the way are arcane (year 2011 and the like) in assuming a certain pixel density that prevailed at that time, and therefore useless. Others relate to webkit whereas Chrome blink may have superseded webkit in chrome (?).

我想通过将事物限制在 Android 上的 Chrome 来探索是否存在一个简单的解决方案.

I would like to explore the existence of a simple solution by constraining things to only Chrome on Android.

这完全是关于浏览器内的 javascript(或 css)解决方案，而不是本机应用程序的解决方案.

This is all about a javascript (or css) solution inside the browser, not a solution for a native app.

推荐答案

您无法真正获得真实的物理尺寸或实际 DPI，即使可以，您也无法对它们做任何事情.

You can't really get the real physical dimensions or the actual DPI and even if you could, you can't do anything with them.

这是一个相当长且复杂的故事，所以请原谅我.

This is a pretty long and complex story, so forgive me.

网络和所有浏览器都将 1px 定义为一个称为 CSS 像素的单位.CSS 像素不是真正的像素，而是根据设备的视角被认为是 1/96 英寸的单位.这被指定为参考像素.

The web and all browsers define 1px as a unit called a CSS pixel. A CSS pixel is not a real pixel, rather a unit that is deemed to be 1/96th of an inch based on the viewing angle of the device. This is specified as a reference pixel.

参考像素是设备上一个像素的视角96dpi 的像素密度和与手臂阅读器的距离长度.对于 28 英寸的标称臂长，视角为因此大约 0.0213 度.对于在手臂的长度阅读，1px 因此对应约 0.26 毫米(1/96 英寸).

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

在 0.26 毫米的空间中，我们可能拥有非常多的真实设备像素.

In 0.26mm of space we might have very many real device pixels.

浏览器这样做主要是出于遗留原因——大多数显示器在 Web 诞生时都是 96dpi——但也是为了一致性，在过去"，在 800x600 的 15 英寸屏幕上的 22px 按钮将是一个大小的两倍15 英寸显示器上的 22 像素按钮，分辨率为 1600x1200.在这种情况下，屏幕的 DPI 实际上是 2x(水平分辨率的两倍，但在相同的物理空间中).这对网络和应用程序来说是一个糟糕的情况，因此大多数操作系统设计了许多方法来将像素值抽象为设备独立单元(Android 上的 DIPS、iOS 上的 PT 和网络上的 CSS 像素).

The browser does this mainly for legacy reasons - most monitors were 96dpi when the web was born - but also for consistency, in the "old days" a 22px button on a 15 inch screen at 800x600 would be twice the size of a 22px button on a 15 inch monitor at 1600x1200. In this case the DPI of the screen is actually 2x (twice the resolution horizontally but in the same physical space). This is a bad situation for the web and apps, so most operating systems devised many ways to abstract pixel values in to device independent units (DIPS on Android, PT on iOS and the CSS Pixel on the web).

iPhone Safari 浏览器是第一个(据我所知)引入视口概念的.这是为了使完整的桌面风格应用程序能够在小屏幕上呈现.视口被定义为 960 像素宽.这实际上将页面缩小了 3 倍(iphone 最初是 320 像素)，因此 1 CSS 像素是物理像素的 1/3.当你定义一个视口时，你可以让这个设备在 163dpi 下匹配 1 个 CSS 像素 = 1 个真实像素.

The iPhone Safari browser was the first (to my knowledge) to introduce the concept of a viewport. This was created to enable full desktop style applications to render on a small screen. The viewport was defined to be 960px wide. This essentially zoomed the page out 3x (iphone was originally 320px) so 1 CSS pixel is 1/3rd of a physical pixel. When you defined a viewport though you could get this device to match 1 CSS pixel = 1 real pixel at 163dpi.

通过使用宽度为设备宽度"的视口，您无需将每个设备的视口宽度设置为最佳 CSS 像素大小，浏览器会为您完成.

By using a viewport where the width is "device-width" frees you up from having to set the width of the viewport on a per device basis to the optimal CSS pixel size, the browser just does it for you.

随着双 DPI 设备的引入，手机制造商不希望移动页面看起来小 50%，因此他们引入了一个称为 devicePixelRatio 的概念(我相信首先在移动 webkit 上)，这让他们保持 1 个 CSS 像素大约 1/96 英寸，但让您了解您的资产(例如图像)可能需要两倍大小.如果您查看 iPhone 系列，他们的所有设备都会说 CSS 像素的屏幕宽度为 320px，即使我们知道这一点不是真的.

With the introduction of double DPI devices, mobile phone manufacturers didn't want mobile pages to appear 50% smaller so they introduced a concept called devicePixelRatio (first on mobile webkit I believe), this lets them keep 1 CSS pixel to be roughly 1/96th of an inch but let you understand that your assets such as images might need to be twice the size. If you look at the iPhone series all of their devices say the width of the screen in CSS pixels is 320px even though we know this is not true.

因此，如果您在 CSS 空间中将按钮设置为 22 像素，则物理屏幕上的表示为 22 * 设备像素比.其实我这么说，不完全是因为设备像素比也从来没有精确过，手机制造商将其设置为一个不错的数字，例如 2.0、3.0 而不是 2.1329857289918....

Therefore if you made a button to be 22px in CSS space, the representation on the physical screen is 22 * device pixel ratio. Actually I say this, it is not exactly this because the device pixel ratio is never exact either, phone manufacturers set it to a nice number like 2.0, 3.0 rather than 2.1329857289918....

总而言之，CSS 像素与设备无关，让我们不必担心屏幕的物理尺寸和显示密度等.

In summary, CSS pixels are device independent and let us not have to worry about physical sizes of the screens and the display densities etc.

这个故事的寓意是:不要担心了解屏幕的物理像素大小.你不需要它.50px 在所有移动设备上看起来应该大致相同，它可能略有不同，但 CSS Pixel 是我们构建一致文档和 UI 的独立于设备的方式

The moral of the story is: Don't worry about understanding the physical pixel size of the screen. You don't need it. 50px should look roughly the same across all mobile devices it might vary a little, but the CSS Pixel is our device independent way to build consistent documents and UI's

资源:

• https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
• https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
• http://viewportsizes.com/
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• http://en.wikipedia.org/wiki/Device_independent_pixel
• http://www.w3.org/TR/css3-values/#absolute-lengths
• https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

这篇关于在 Android 上的 Chrome 中获取物理屏幕尺寸/dpi/像素密度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！