Android上Chrome的物理屏幕尺寸/dpi/像素密度 问题:

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

前期研究 关于从javascript（或css）中获取设备的实际物理屏幕尺寸，stackoverflow上有许多死角问题。html api标准化和实际的浏览器实现之间似乎没有融合，更不用说浏览器实现依赖于操作系统api，而操作系统api又依赖于提供正确信息的硬件

顺便说一句，之前的一些答案是神秘的（2011年之类的），假设当时流行某种像素密度，因此毫无用处。其他与webkit相关，而Chrome blink可能已经取代了Chrome（？）中的webkit

我想探索一个简单的解决方案的存在，通过限制Android上的Chrome浏览器

注

---

这一切都是关于浏览器内部的javascript（或css）解决方案，而不是针对本机应用程序的解决方案。

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

这是一个很长很复杂的故事，所以请原谅我

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

参考像素是设备上一个像素的视角 像素密度为96dpi，与手臂读卡器的距离 长度。对于28英寸的标称臂长，视角为 因此大约0.0213度。用于手臂长度的读数，因此为1px 相当于约0.26毫米（1/96英寸）

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

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

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

通过使用宽度为“设备宽度”的视口，您无需将每个设备的视口宽度设置为最佳CSS像素大小，浏览器只需为您执行此操作

随着双DPI设备的引入，手机制造商不希望手机页面缩小50%，因此他们引入了一个称为devicePixelRatio的概念（我认为首先是在手机webkit上），这让他们保持1个CSS像素大约为1/96英寸，但让你明白，你的资产，如图像，可能需要两倍的大小。如果你看看iPhone系列，他们所有的设备都会显示屏幕的宽度，尽管我们知道这不是真的

因此，如果在CSS空间中将按钮设置为22px，则物理屏幕上的表示为22*设备像素比。事实上，我这么说，这并不完全是因为设备像素比也不精确，手机制造商将其设置为一个很好的数字，比如2.0，3.0，而不是2.1329857289918

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

---

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

资源：

祝你好运

---

Danny117

我用我的一个web项目解决了这个问题。答案是，你不能确定物理尺寸是多少，但你可以得到一个近似值。使用JS和/或CSS，您可以通过媒体查询找到视口/屏幕的宽度和高度以及像素密度。例如：iphone5（326ppi）=320px×568px，像素密度为2.0；而三星Galaxy S4（441ppi）=360px×640px，像素密度为3.0。实际上，1.0像素密度约为150 ppi

鉴于此，我将CSS设置为在宽度小于284px时显示1列，而不考虑像素密度；然后是284px和568px之间的两列；然后是852px以上的3列。它比看起来简单得多，因为浏览器现在自动进行像素密度计算

---

根据马特的回答，我做了一个测试：

// on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size
// approximately 15.4? Let's see...

var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var screenWidthMillimeters = svgEl.screenPixelToMillimeterX * 2880;
var screenHeightMillimeters = svgEl.screenPixelToMillimeterY * 1800;
var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem
var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in

console.log("The calculated diagonal of the screen is "+screenDiagonalInches+" inches. \nIs that close to the actual 15.4\"?");

这是输出：

The calculated diagonal of the screen is 35.37742738560738 inches. 
Is that close to the actual value of 15.4?

没有

因此，似乎还没有办法在web浏览器中获得真实的物理值。

使用getPPI（）函数（）获得一英寸id，请使用以下公式：

var ppi = getPPI();
var x   = ppi * devicePixelRatio * screen.pixelDepth / 24;
$('#Cubo').width (x);
$('#Cubo').height(x);

<div id="Cubo" style="background-color:red;"></div>

var-ppi=getPPI（）；
var x=ppi*设备像素比率*屏幕像素深度/24；
$（'#Cubo'）。宽度（x）；
$（'#Cubo'）。高度（x）；

您可以通过WURFL获得该信息：

这些属性称为：

resolution_(width|height)

physical_display_(width|height)

长版本：

实现这一目标的最佳和最可靠的策略

var ppi = getPPI();
var x   = ppi * devicePixelRatio * screen.pixelDepth / 24;
$('#Cubo').width (x);
$('#Cubo').height(x);

<div id="Cubo" style="background-color:red;"></div>

resolution_(width|height)

physical_display_(width|height)

<div id="meter" style="width:10cm"></div>

<script>
var pixPer10CM = $('#meter').width();
var CMPerPix = 10 / pixPer10CM;
var widthCM = screen.width * CMPerPix;

alert(widthCM);
</script>

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi)
    {
     /* specific styles for handhelds/ high dpi monitors*/
    }

Unit    Description
cm      centimeters
mm      millimeters
in      inches (1in = 96px = 2.54cm)
px *    pixels (1px = 1/96th of 1in)
pt      points (1pt = 1/72 of 1in)
pc      picas (1pc = 12 pt)

* Pixels (px) are relative to the viewing device.
For low-dpi devices, 1px is one device pixel (dot) of the display.
For printers and high resolution screens 1px implies multiple device pixels.

    (Not code but I wanted fixed width font)

    Hand held - Phone/Tablet         25cm 
    Touch screen / Desktop Monitor   40cm         ( seated or standing at a counter
                                                    with partially extended arm )
    "Personal" Touch kiosk        50cm -> 80cm ( a bit further away standing 
                                                 extended arms and standing back 
                                                 to view )
    Presentation Screen.          any distance ( angle of view derived from pixel
                                                 width of device. An ideal conventional cinema 
                                                 seat (as opposed to imax or immersive) 
                                                 you want about 50 degrees
                                                 between edges of the screen. from viewer POV )

    So what you want universally available is:

    device usage type.
    finger size in pixels (dots per CM)
    pixel dimensions of display.

    Then internally, when laying out and drawing you want the size/shape of a pixel 
    for the current transform.