Как масштабировать элемент блока, чтобы он отображался на разных мобильных экранах одинакового размера?

Question

Я построил приложение Google Cardboard (или, по крайней мере, приложение, совместимое с Google Картом с возможностью улучшения), которое хорошо работает на телефонах с 5-6-дюймовыми экранами (iOS и Android) и средством просмотра Google Картона, предназначенным для работы с этими 5- 6 ". Однако, просматривая приложение на более крупном экране «phablet», видение удваивается, и приложение становится бесполезным для этих устройств.

Поскольку приложение, в основном, работает в браузерах браузера Safari и Chrome, есть ли способ масштабировать элемент canvas/block приложения, чтобы оставаться в пределах 5-6-дюймового диапазона на больших мобильных устройствах? иллюстрация того, что я пытаюсь выполнить:

пока мой поиск приносит мне ответы, как this one, объясняя, что это не может быть вполне возможно Если это ответ в этом случае, я буду работаю с ним.Я видел другие приложения Google Картон VR, которые отлично масштабируются на больших экранах, но, возможно, JavaScript, HTML и CSS не задействованы.

Я использую PhoneGap и Adobe PhoneGap Build для создания этого приложения, поэтому у меня также есть доступ к плагинам PhoneGap/Cordova, если это поможет.

Возможно, есть API, который позволит просматривать информацию о устройстве через информацию о телефоне, доступную в браузере или API Картон Google (на данный момент не используется Картон SDK или два из-за того, что PhoneGap находится посередине).

Я скоро перейду к этой теме, но с нетерпением жду любых мыслей о том, как ответить на этот вопрос.

Answer 1

Уловка - надежно получить экран DPI.

На Android вы можете использовать getRealMetrics , который возвращает DPI экрана. Обратите внимание, что это иногда не так.

В Интернете вы можете проверить webvr-polyfill's DPI database, в котором представлены значения DPI для некоторых популярных телефонов.