Wie skaliere ich ein Blockelement so, dass es auf verschiedenen mobilen Bildschirmen dieselbe Größe aufweist?

Question

Ich habe eine Google Cardboard App (oder zumindest eine Google Cardboard-kompatible App mit Platz für Verbesserungen) entwickelt, die gut auf Smartphones mit 5-6 "Bildschirmen (iOS und Android) und einem Google Cardboard Viewer funktioniert. 6 "Bildschirme. Wenn Sie die App jedoch in einem größeren "Phablet" -Bildschirm betrachten, verdoppelt sich die Sicht und die App wird für diese Geräte nutzlos.

Da die App in erster Linie in den Standardbrowsern Safari und Chrome läuft, gibt es eine Möglichkeit, das Element "apps canvas/block" so zu skalieren, dass es auf größeren Mobilgeräten im Bereich von 5-6 "bleibt Illustration dessen, was ich versuche zu erreichen:

Bisher bringt meine Suche mich auf Antworten wie this one und erklärt, dass dies nicht vollständig möglich sein könnte, wenn das in diesem Fall die Antwort ist, ich werde Ich habe andere Google Cardboard VR-Apps gesehen, die sich auf großen Bildschirmen gut skalieren lassen, aber vielleicht sind JavaScript, HTML und CSS nicht beteiligt.

Ich benutze PhoneGap und Adobe PhoneGap Build, um diese App zu erstellen, also habe ich auch Zugang zu PhoneGap/Cordova-Plugins, wenn das hilft.

Vielleicht gibt es eine API, die das Suchen von Geräteinfos über Telefoninformationen im Browser oder einer Google Cardboard-API ermöglicht (im Moment wird kein Cardboard-SDK oder zwei verwendet, da sich PhoneGap in der Mitte befindet).

Ich werde dieses Thema bald wieder besuchen, aber freue mich auf Ihre Gedanken, wie Sie diese Frage beantworten können.

Answer 1

Der Trick ist, den Bildschirm DPI zuverlässig zu bekommen.

In Android können Sie verwenden, der die DPI des Bildschirms zurückgibt. Beachten Sie, dass dies manchmal ein wenig aus ist

Im Internet können Sie überprüfen, die webvr-Polyfill DPI database, die DPI-Werte für einige beliebte Handys präsentiert.