Ich erstelle eine Web-App, die Webseiten für mobile Geräte generiert und bereitstellt. Der Benutzer konfiguriert beispielsweise, welche Daten angezeigt werden sollen, und verwendet eine Geschwindigkeitsvorlage, um die endgültigen HTML / CSS / JS-Dateien zu generieren. Wenn die Vorlage und die darin enthaltenen Informationen konfiguriert sind, stellen die Clients eine Verbindung zum Server her, um die generierten Seiten anzuzeigen.
Ich erstelle jetzt jedoch einen Vorschaubildschirm dafür. Also, sagen wir mal, ich möchte sehen, wie es auf einem, sagen wir, Nexus 5 aussehen wird.
Mein Ziel ist es, etwas wie Google auf Chrome zu erstellen - die Mobilgeräte-Emulation. Das Problem ist, dass ich nicht verstehen kann, wie sie diese Art von Emulation ausführen können.
Es stimmt, dass der Inhalt herausgezoomt werden muss, um alles anzuzeigen. Das ist ziemlich einfach zu verstehen, als ob der Bildschirm nicht groß genug wäre, um ihn anzupassen.
Also, ich kenne die Bildschirmdiagonale des Geräts, seine Auflösung und PPI (Punkte pro Zoll). Was ich wissen muss, ist, wie man die richtigen Maße für meine Website erhält, um das Gerät zu emulieren. Wenn ich zum Chrome-Emulationswerkzeug gehe, sehe ich, dass das Nexus 5 wie folgt angezeigt wird:
Ich weiß, wie sie das Pixel-Seitenverhältnis berechnen: Es ist der PPI des Geräts dividiert durch 160 (Basis-PPI). Also, 445/160 = ~ 3 (445 ist die Pixeldichte von Nexus 5). So kamen sie zum 360 x 640: Sie teilen die Auflösung durch das Pixel-Seitenverhältnis (3).
Auf meiner Website habe ich einen iframe und lade die generierte Seite hinein. Dann weiß ich, dass ich eine Zoomstufe anwenden muss. Und hier liegt das Problem. Ich weiß nicht wirklich, welchen Wert das Zoomen haben sollte.
Einer der Versuche war
1 / ((Bildschirmdiagonale) / Pixel-Seitenverhältnis) = 1 / (4.95 / 3) = 0,6060 (60)
Wenn Sie diesen Zoom anwenden, sieht das gut aus. Wenn ich dem gleichen Ansatz mit einem Amazon Kindle HDX folge, funktioniert es auch.
Wenn ich jedoch mit dem LG L70 gehe bekomme ich folgendes:
1 / (4.5 / 1.25) = 0.277777777 ...
Das Problem ist, dass das Anwenden dieses Zooms im Vergleich zum Nexus 5 viel kleiner ist (wegen der großen Verkleinerung) und im Chrome-Emulationsmodus so ähnlich aussieht.
Bitte lassen Sie es mich wissen, wenn noch Informationen zur Lösung dieses Rätsels vorhanden sind.
Ein Pixel-Seitenverhältnis bestimmt das Verhältnis zwischen Breite und Höhe, ein Maß dafür, wie "quadratische" Pixel auf einem Gerät sind.
Mit Google können Sie jedoch das Gerätepixelverhältnis anpassen. Dies misst, wie viele Gerätepixel auf ein einzelnes logisches Pixel (1px in css) abgebildet werden.
Ich glaube, dass das Geräte-Pixel-Verhältnis zählt, um verschiedene Bildschirmgrößen gleich groß erscheinen zu lassen.
Dichteberechnungen, bei denen das Gerätepixelverhältnis zur Berechnung des effektiven Zooms verwendet wird, können in einer Dimension berechnet werden, es ist keine Diagonalmessung erforderlich.
So berechnen Sie effektiv css_width auf dem Desktop von einem Tablet:
desktop_pixels = tablet_pixels * (desktop_ppi / tablet_ppi) (1)
tablet_pixels = tablet_css_width * tablet_pixel_density
desktop_pixels = desktop_css_width * desktop_pixel_density
in (1)
desktop_css_width * desktop_pixel_density = tablet_css_breite * tablet_pixel_density * (desktop_ppi / tablet_ppi)
neu anordnen
desktop_css_width = tablet_css_width * (tablet_pixel_density / desktop_pixel_density) * (desktop_ppi / tablet_ppi)
Der logische Zoomfaktor ist desktop_css_width / tablet_css_width
zoom_factor = (tablet_pixel_density / desktop_pixel_density) * (desktop_ppi / tablet_ppi)
Tags und Links html screen-resolution screen zoom emulation