Javascript 如何缩放块元素，使其在不同的移动屏幕上显示相同的大小？

我开发了一个应用程序（或者至少是一个谷歌纸板兼容的应用程序，还有改进的余地），它可以在5-6英寸屏幕（iOS和Android）的手机上运行，谷歌纸板查看器也可以在5-6英寸屏幕上运行。但是，如果在更大的“phablet”屏幕上查看应用程序，则视觉效果会加倍，应用程序对这些设备将变得毫无用处

由于该应用程序主要在手机的股票浏览器Safari和Chrome中运行，是否有办法缩小应用程序画布/块元素的比例，使其在较大的移动设备上保持在5-6英寸的范围内？以下是我试图实现的一个粗略说明：

到目前为止，我的搜索给我带来了这样的答案，解释说这可能不完全可能？如果这是本例中的答案，我将使用它。我见过其他谷歌硬纸板VR应用程序在大屏幕上可以很好地缩小规模，但可能JavaScript、HTML和CSS没有涉及

我正在使用PhoneGap和Adobe PhoneGap Build创建此应用程序，因此如果有帮助，我还可以访问PhoneGap/Cordova插件

也许有一个API允许通过浏览器中的电话信息或谷歌纸板API查找设备信息（由于PhoneGap位于中间，目前不使用纸板SDK或两个）

---

我将很快重新讨论这个话题，但期待您对如何回答这个问题有任何想法。

关键在于可靠地获得屏幕DPI

在Android上，您可以使用 返回屏幕的DPI。请注意，这有时有点不正确

---

在网络上，您可能想查看webvr polyfill's，它提供了一些流行手机的DPI值。

我很乐意接受这个答案。这给了我两个很好的线索来研究。谢谢！