获取物理屏幕尺寸/ DPI /像素密度的Chrome浏览器在Android [英] Getting the physical screen dimensions / dpi / pixel density in Chrome on Android
问题描述
有没有一种安全的方式来获得在Chrome实际正确的屏幕物理尺寸，在Android上？如果有必要，旧版本的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）得到一个设备的实际物理屏幕的尺寸。它似乎还有在HTML 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年等）中假设某像素密度$ pvailed在那个时刻p $，因此是无用的。其他涉及到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 but Chrome is using blink for a while already, so those are not very relevant too.
我想通过限制事情只有Chrome浏览器在Android上，探索一个简单的解决方案的存在。
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.
嗯，我碰到了以下新特性对： screenPixelToMillimeterX ， screenPixelToMillimeterY ，其中吐出一些号码最新版本的Chrome，并记录为IE和Firefox（如<一个href="https://developer.mozilla.org/en/docs/Web/API/SVGSVGElement">https://developer.mozilla.org/en/docs/Web/API/SVGSVGElement).不知道这是否是有用的，它可以什么都不知道，除非操作系统可以告诉。
Well, I bumped into the following new property pair: screenPixelToMillimeterX, screenPixelToMillimeterY, which spit out some numbers in latest version Chrome, and is documented for IE and Firefox (e.g. https://developer.mozilla.org/en/docs/Web/API/SVGSVGElement). Not sure if it's useful, it can't know anything unless the OS can tell.
推荐答案
您真的不能得到真正的物理尺寸或实际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.
这是一个pretty的漫长而复杂的故事，所以请原谅我。
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.
浏览器做到这一点主要是针对传统的原因 - 大多数显示器是96DPI当Web诞生了 - 而且为了保持一致性，在旧时代，在800×600 15英寸屏幕上的22px按钮将是一个两倍大小15英寸显示器在1600x1200的22px按钮。在这种情况下，屏幕的新闻部实际上是2×（两倍的分辨率水平，但在相同的物理空间）。这是Web和应用程序恶劣的情况下，因此大多数的操作系统设计了许多方法来抽象的像素值，以与设备无关的单位（DIPS在Android上，PT iOS和在网络上的 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浏览器是第一次（据我所知）引入视的概念。这是为了实现完整的桌面风格应用程序呈现在小屏幕上。视口被定义为960px宽。这实质上是缩小页面了3倍（iphone本来320PX），因此1 CSS像素的物理像素的1/3。当你定义一个视口，虽然你可以得到这个设备匹配1 CSS像素= 1实际像素163dpi。
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的空间，22px，物理屏幕上，再presentation是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.
这个故事的寓意是：不要担心理解屏幕的物理像素尺寸。你并不需要它。 50像素应该是大致相同的在所有的移动设备，可能会有一些变化，但CSS像素是我们与设备无关的方式来建立一致的文档和用户界面的
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
资源：
- <一个href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport">https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
- <一个href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport">https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
- http://viewportsizes.com/
- <一个href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
- <一个href="http://en.wikipedia.org/wiki/Device_independent_pixel">http://en.wikipedia.org/wiki/Device_independent_pixel
- <一个href="http://www.w3.org/TR/css3-values/#absolute-lengths">http://www.w3.org/TR/css3-values/#absolute-lengths
- <一个href="https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag">https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
- 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
这篇关于获取物理屏幕尺寸/ DPI /像素密度的Chrome浏览器在Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
