11

如何使用 javascript 获得真正的 PPI（每英寸像素）设备分辨率？

预期设备和值的一些示例：

  • iMac 27 英寸：109ppi
  • iPad：132ppi
  • 19 英寸 1440x900 屏幕：89ppi
  • ...
4

4 回答 4

8

直接在操作系统之上运行本机应用程序是获取存储在 EDID 中的客户端监视器的物理特征的唯一可靠方法。目前没有主流浏览器引擎通过任何 Web API 提供此信息，并且在可预见的将来可能不会。然而，有几种方法可以将密度近似为不同的精度水平。

所有现代浏览器都通过 devicePixelRatio、deviceXDPI 等属性提示像素密度，这些属性基本上告诉您客户端正在进行多少缩放（相对于 1.0x 操作系统默认缩放）。如果您只针对 Apple 系列等少数设备，那么您可能能够分辨出哪个是哪个，尽管 Apple 并没有留下一点线索来区分 iPad mini 和普通 iPad。

另一种选择是使用设备数据库或专有软件分析客户端的“用户代理字符串”来实现对设备的命中或未命中猜测，然后查找与该设备关联的 DPI（如果它存在于他们的大数据库中）。通过利用复杂的数据挖掘算法，昂贵的专有系统可能具有更高的准确性，但无论如何，像这样的任何系统都需要不断手动更新，并且仍然对客户端操作保持开放，因为它们可以更改其用户代理字符串（“以桌面模式查看此网站” )

没有这些信息真的很不幸。我花了无数个小时研究任何可能的方式来制作一个 PPI 感知 Web 应用程序。

也许有一天，有人能够说服 WebKit、Mozilla 或 Microsoft 的人们允许人们为增强现实等创建可感知 PPI 的 Web 应用程序……叹息

于 2014-04-17T08:56:46.947 回答
5

在纯 JS 中：

function calcScreenDPI() {
    const el = document.createElement('div');
    el.style = 'width: 1in;'
    document.body.appendChild(el);
    const dpi = el.offsetWidth;
    document.body.removeChild(el);

    return dpi;
}
于 2019-08-04T11:29:09.997 回答
0

您可以创建一个1in固定高度的元素，然后以像素为单位查看其高度

createDpiTestElements()
var dpi = getDpi()

因为

[dpi] = [px/in]

所以让

  • p是以像素为单位的对象长度 [px]
  • i以英寸为单位的物体长度 [in]
  • 并d成为该对象的搜索 DPI/PPI，以每英寸像素 [dpi] 为单位

我们得到

d = p/i

所以如果我们选择

i = 1

我们得到

d = p

JS代码

/**
 * @function
 * @inner
 */
function createDpiTestElements () {
  var getDpiHtmlStyle = 'data-dpi-test { height: 1in; left: -100%; position: absolute; top: -100%; width: 1in; }'

  var head = document.getElementsByTagName('head')[0]
  var getDPIElement = document.createElement('style')
  getDPIElement.setAttribute('type', 'text/css')
  getDPIElement.setAttribute('rel', 'stylesheet')
  getDPIElement.innerHTML = getDpiHtmlStyle
  head.appendChild(getDPIElement)

  var body = document.getElementsByTagName('body')[0]
  var dpiTestElement = document.createElement('data-dpi-test')
  dpiTestElement.setAttribute('id', 'dpi-test')
  body.appendChild(dpiTestElement)
}

/**
 * Evaluate the DPI of the device's screen (pixels per inche).
 * It creates and inpect a dedicated and hidden `data-dpi-test` DOM element to
 * deduct the screen DPI.
 * @method
 * @static
 * @returns {number} - The current screen DPI, so in pixels per inch.
 */
function getDpi () {
  return document.getElementById('dpi-test').offsetHeight
}
于 2016-09-24T17:59:51.897 回答
-2

这对我有用（但没有在手机上测试过）：

然后我把.js: screenPPI = document.getElementById('ppitest').offsetWidth;

这让我得到了 96，这对应于我系统的 ppi。

于 2015-06-18T22:18:55.703 回答