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

Question

我开发了一个Google Cardboard应用程序(或者至少是一个与Google兼容的、有改进空间的应用程序)，它在5到6英寸的屏幕(iOS和安卓)手机上运行得很好，而Google浏览器则是设计用来处理5-6“屏幕的。然而，如果在一个更大的“平板”屏幕上查看应用程序，视力会加倍，而该应用程序对这些设备就变得毫无用处。

由于应用程序主要运行在手机的股票浏览器Safari和Chrome中，有没有办法缩小应用程序的画布/块元素，使其在更大的移动设备上保持在5-6“的范围内?下面是我试图实现的目标的粗略说明：

​

​

到目前为止，我的搜索带我找到了像这一个这样的答案，解释说这可能不是完全可能的。如果这是这个问题的答案，我会处理的。我见过其他Google应用程序，它们在大屏幕上可以很好地缩小，但也许JavaScript、HTML和CSS并不涉及其中。

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

也许有一个API允许通过浏览器中的电话信息查找设备信息，或者(目前由于PhoneGap处于中间位置而没有使用Cardboard SDK或两个)。

我很快就会再讨论这个话题，但是期待你对如何回答这个问题有什么想法。

Answer 1

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

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

在网络上，您可能需要查看webvr-polyfill的DPI数据库，它为一些受欢迎的手机提供DPI值。