在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

资源:

基于马特的回答,我做了一个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);