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

Question

我构建了一个Google Cardboard应用（或至少一个与Google Cardboard兼容的应用程序，有改进余地），适用于5-6岁的手机。屏幕（iOS和Android）和Google Cardboard查看器，旨在与5-6＆＃34;屏幕。但是，如果在较大的＆＃34;平板电脑中观看应用程序＆＃34;屏幕，视觉翻倍，应用程序对这些设备变得毫无用处。

由于应用程序主要在手机中运行＆＃39;股票浏览器Safari和Chrome，有没有办法缩小app canvas / block元素以保持在5-6＆＃34;大型移动设备的范围？以下是我想要完成的事情的粗略说明：

到目前为止，我的搜索为我提供了this one等答案，并解释说这可能不完全可能吗？如果这是这种情况下的答案，我将使用它。我见过其他Google Cardboard VR应用程序在大屏幕上可以很好地缩小，但也许不涉及JavaScript，HTML和CSS。

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

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

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

Answer 1

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

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

在网络上，您可能需要查看webvr-polyfill的DPI database，它会显示某些热门手机的DPI值。