如何缩放块元素以在不同的移动屏幕上显示相同的大小？答案

【问题标题】：How do I scale a block element to appear the same size on different mobile screens?如何缩放块元素以在不同的移动屏幕上显示相同的大小？
【发布时间】：2016-04-06 02:27:41
【问题描述】：

我构建了一个Google Cardboard 应用程序（或至少一个与 Google Cardboard 兼容的应用程序，还有改进的余地），该应用程序在具有 5-6 英寸屏幕（iOS 和 Android）的手机上运行良好，并且设计用于使用 Google Cardboard 查看器那些 5-6 英寸的屏幕。但是，如果在更大的“平板手机”屏幕中查看应用程序，视力会加倍，并且应用程序对于这些设备变得毫无用处。

由于该应用程序主要在手机的常用浏览器 Safari 和 Chrome 中运行，有没有办法缩小应用程序的画布/块元素以在更大的移动设备上保持在 5-6" 范围内？这是一个粗略的说明我想要完成的事情：

到目前为止，我的搜索让我得到了像 this one 这样的答案，解释说这可能不是完全可能的？如果这就是这种情况下的答案，我会处理它。我见过其他 Google Cardboard VR 应用程序可以在大屏幕上很好地缩小比例，但可能不涉及 JavaScript、HTML 和 CSS。

我正在使用 PhoneGap 和 Adobe PhoneGap Build 来创建这个应用程序，所以如果有帮助的话，我还可以访问 PhoneGap/Cordova 插件。

也许有一个 API 允许通过浏览器中可用的电话信息或 Google Cardboard API 查找设备信息（由于 PhoneGap 在中间，目前不使用一两个 Cardboard SDK）。

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

【问题讨论】：

标签： javascript android ios screen-resolution google-cardboard

【解决方案1】：

诀窍是可靠地获得屏幕 DPI。

在 Android 上，您可以使用 getRealMetrics 它返回屏幕的 DPI。请注意，这有时会有点偏离

在网络上，您可能需要查看 webvr-polyfill 的 DPI database，它显示了一些流行手机的 DPI 值。

【讨论】：

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