Question

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

预期的设备和价值的一些例子：

iMac 27英寸：109ppi
iPad：132ppi
19inch 1440x900 screen：89ppi
...

Answer 1

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

所有现代浏览器都通过devicePixelRatio，deviceXDPI等属性提供像素密度的提示，它基本上告诉您客户端进行了多少缩放（相对于1.0x操作系统默认缩放）。如果您只针对像Apple系列这样的少数设备，那么您可能会知道哪一个是哪个设备，尽管Apple没有留下一条线索来辨别常规iPad上的iPad mini。

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

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

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

Answer 2

您可以创建一个固定高度为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
}

Answer 3

在纯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;
}

Answer 4

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

然后我输入.js：screenPPI = document.getElementById（＆＃39; ppitest＆＃39;）。offsetWidth;

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

在javascript中获取设备PPI

4 个答案:

JS代码