在Android上的Chrome中获取物理屏幕尺寸/ dpi /像素密度
题
有没有一种安全的方式来获得实际正确的屏幕物理尺寸在Chrome上，在Android上？ 如果有必要的话，Chrome和Android的旧版本可能会被排除在范围之外。
之前的研究
关于从javascript（或css）中获取设备的实际物理屏幕尺寸的stackoverflow有许多死胡同的问题。 似乎html api标准化和实际浏览器实现之间没有收敛，更不用说浏览器实现依赖于OS api，后者依靠硬件提供正确的信息。
顺便提一下，一些先前的答案是奥秘（2011年等）在假设当时盛行的某个像素密度，因此是无用的。 其他与webkit有关，但Chrome浏览器在Chrome（？）中眨眼取代了Webkit。
我想通过在Android上仅限于Chrome来探索简单解决scheme的存在。
注意
这是关于浏览器内部的javascript（或css）解决scheme，而不是本地应用程序的解决scheme。
你不能真正得到真正的物理尺寸或实际的新闻部，即使你可以，你也不能做任何事情。
这是一个相当漫长而复杂的故事，请原谅我。
网页和所有浏览器将1px定义为一个称为CSS像素的单元。 一个CSS像素不是一个真实的像素，而是一个单位，被认为是基于设备的视angular的1/96英寸。 这被指定为参考像素 。
参考像素是像素密度为96dpi的设备上的一个像素的视angular，以及距arm长度的读取器的距离。 对于28英寸的标称臂长来说，视angular约为0.0213度。 对于arm长度来说，1px因此对应于大约0.26毫米（1/96英寸）。
在0.26mm的空间中，我们可能会有非常多的真实设备像素。
浏览器主要是出于传统的原因 – 大多数显示器的网页出生时为96dpi – 但是为了保持一致性，在“旧时代”，15x的800×600屏幕上的22pxbutton的大小是22pxbutton的两倍在1600×1200 15英寸显示器。 在这种情况下，屏幕的DPI实际上是2倍（水平分辨率的两倍，但是在相同的物理空间中）。 这对networking和应用程序来说是一个糟糕的情况，所以大多数操作系统devise了很多方法将像素值抽象到独立于设备的单元（Android上的DIPS，iOS上的PT和Web上的CSS像素 ）。
iPhone Safari浏览器是第一个（据我所知）介绍一个视口的概念。 这是为了使整个桌面风格的应用程序能够在小屏幕上呈现而创build的。 视口被定义为960px宽。 这基本上把页面放大了3倍（iPhone最初是320px），所以1个CSS像素是物理像素的1/3。 当你定义一个视口，虽然你可以得到这个设备匹配1 CSS像素= 1实际像素163dpi。
通过使用宽度为“设备宽度”的视口，您不必将每个设备的视口宽度设置为最佳的CSS像素大小，浏览器只是为您做。
随着双DPI设备的推出，手机制造商不希望手机页面出现50％的小，所以他们引入了一个名为devicePixelRatio的概念（首先在移动webkit我相信），这让他们保持1个CSS像素约为1 / 96英寸，但让你明白，你的资产，如图像可能需要是两倍的大小。 如果你看看iPhone系列，他们所有的设备都会说， CSS像素的屏幕宽度是320px ，尽pipe我们知道这是不正确的。
因此，如果您在CSS空间中创build了22px的button，则实际屏幕上的表示forms为22 *设备像素比率。 其实我这样说，这不完全是因为设备的像素比例从来没有确切的，手机制造商将其设置为一个很好的数字，如2.0，3.0而不是2.1329857289918 ….
总之，CSS像素是独立于设备的，我们不必担心屏幕的物理尺寸和显示密度等。
故事的寓意是：不要担心理解屏幕的物理像素大小。 你不需要它。 50px在所有移动设备上看起来应该大致相同，但是CSS像素是我们独立于设备的方式来构build一致的文档和UI
资源：
- 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
基于马特的回答，我做了一个testing：
// 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?
不。
所以似乎没有办法在网页浏览器中获得真实的物理值。
你可以通过WURFL获得这些信息：
设备显示属性
这些属性被称为：
resolution_(width|height) physical_display_(width|height)
长版本：
实现这一目标的最好和最依赖的策略是将user agent string从浏览器发送到像WURFL （或另一个）最新的DB这样的可以提供所需信息的数据库。
用户代理string
这是所有现代浏览器都可以提供的信息。 它暴露有关设备和它的操作系统的信息。 没有WURFL这样的词典的帮助，这对于你的应用程序来说是不够的。
WURFL
这是一个常用于检测设备属性的数据库。
有了它，您可以准确地支持市场上大多数stream行的设备。 我将发布一个代码演示，但可以在WURFL网站上下载。 您可以在随库下载的examples / demo文件夹中find这样的演示。
下载WURFL
以下是有关检查物理尺寸和分辨率的更多信息和说明： http : //www.scientiamobile.com/forum/viewtopic.php?f=16&t=286
您可以创build任何页面元素并使用实际物理单位设置其宽度。 例如
<div id="meter" style="width:10cm"></div>
然后以像素为单位获取其宽度。 例如下面的HTML代码（我使用JQuery）以厘米为单位显示设备屏幕宽度
<script> var pixPer10CM = $('#meter').width(); var CMPerPix = 10 / pixPer10CM; var widthCM = screen.width * CMPerPix; alert(widthCM); </script>
我用我的一个Web项目http://www.vinodiscover.com解决了这个问题。答案是，你不能确定物理尺寸是什么，但是你可以得到一个近似值。; 使用JS和/或CSS，您可以使用媒体查询查找视口/屏幕的宽度和高度以及像素密度。 例如：iPhone 5（326 ppi）= 320px×568px和2.0像素密度，而Samsung Galaxy S4（441ppi）= 360px×640px和3.0像素密度。 有效的1.0像素密度约为150ppi。
鉴于此，我设置我的CSS显示1列时，宽度小于284px，无论像素密度; 然后是284px和568px之间的两列; 然后在852px以上的3列。 这看起来更简单，因为浏览器现在自动进行像素密度计算。
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
使用getPPI（）函数（ Mobile web：如何获得物理像素大小？ ），获取一个1英寸的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>
作为对使用WURFLfind解决scheme的zehelvion回复的回应，还值得一提的是，WURFL也可作为JavaScript代码片段使用 。
在wurfl.io提供的免费版本中，您将不会获得有关屏幕和分辨率的信息（仅限设备名称，外形尺寸和移动/不移动设备），但是在这里也可以使用更多function的商业版本。
CSS像素不是我们的“设备独立像素”。 Web平台由多种设备types组成。 虽然手持设备上的CSS像素看起来非常一致，但在典型的96dpi桌面显示器上，它的尺寸会增大50％。 看到我的问题 。 这在某些情况下确实不是一件坏事，例如，在更大的屏幕上字体应该更大，因为与眼睛的距离更大。 但是UI元素的维度应该是相当一致的。 假设你的应用程序有一个顶栏，你会希望它在桌面和手机上的厚度相同，默认情况下它会减小50％，这是不好的，因为可触摸的元素应该更大。 我发现唯一的解决方法是基于设备DPI应用不同的样式。
你可以用window.devicePixelRatio在JavaScript中获得屏幕DPI。 或者CSS查询：
@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*/ }
我不知道如何应用这将工作在高dpi桌面显示器，但。 也许元素太小了。 networking平台没有提供更好的东西真是一个耻辱。 我猜这个dip的实现不会太难。
JqueryMobile元素的宽度
$(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document
JqueryMobile元素的高度
$(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document
祝你好运Danny117
你可以粗略的估计大小，但并不准确。
我已经在一些设备上testing了一个例子，看看结果如何。 我的iPhone 6返回的值大了33％。 我的Mac上的27“台式机显示器报告为30”显示器。
var $el = document.createElement('div'); $el.style.width = '1cm'; $el.style.height = '1cm'; $el.style.backgroundColor = '#ff0000'; $el.style.position = 'fixed'; $el.style.bottom = 0; document.body.appendChild($el); var screenDiagonal = Math.sqrt(Math.pow((window.screen.width / $el.offsetWidth), 2) + Math.pow((window.screen.height / $el.offsetHeight), 2)); var screenDiagonalInches = (screenDiagonal / 2.54); var str = [ '1cm (W): ' + $el.offsetWidth + 'px', '1cm (H): ' + $el.offsetHeight + 'px', 'Screen width: ' + window.screen.width + 'px', 'Screen height: ' + window.screen.height + 'px', 'Browser width: ' + window.innerWidth + 'px', 'Browser height: ' + window.innerHeight + 'px', 'Screen available width: ' + window.screen.availWidth + 'px', 'Screen available height: ' + window.screen.availHeight + 'px', 'Screen width: ' + (window.screen.width / $el.offsetWidth).toFixed(2) + 'cm', 'Screen height: ' + (window.screen.height / $el.offsetHeight).toFixed(2) + 'cm', 'Screen diagonal: ' + screenDiagonal.toFixed(2) + 'cm', 'Screen diagonal: ' + screenDiagonalInches.toFixed(2) + 'in', 'Device Pixel Ratio: ' + (window.devicePixelRatio || 1) ].join('\n'); var $pre = document.createElement('pre'); $pre.innerHTML = str; document.body.appendChild($pre);
