Unser Ziel ist es zu simulieren, was Entwickler mit nativen iOS-Apps tun können: Verwenden Sie ein einzelnes Layout, basierend auf Einheiten, um Retina-Displays (640x960) und Nicht-Retina-Displays (320x480) unterzubringen.
Alle iOS-Entwickler müssen zwei Arten von Assets bereitstellen, einen für Retina und einen für Nicht-Retina, und ihre Layouts relativ als Einheiten definieren. Wenn Entwickler einer bestimmten Namenskonvention folgen, erkennt iOS automatisch die Bildschirmgröße des Benutzers und verwendet die richtigen Ressourcen und skaliert das Layout entsprechend.
Das bedeutet, dass Entwickler zwei Benutzerbasen mit einer Codebasis bedienen können.
Gibt es Frameworks, die HTML5-Entwicklern helfen, dasselbe zu erreichen?
Was haben Menschen getan, um nicht-Retina und Retina-Displays zu bedienen, während doppelter Code minimiert wird?
Danke!
Es gibt zwei einfache Dinge, die Sie tun können, damit Ihre Seiten in beiden Modi funktionieren.
Zuerst legen Sie Ihr Ansichtsfenster mit einem Meta-Tag im Dokumentenkopf fest. Dadurch erhalten Sie eine Seitenbreite von 480 in Querformat und 320 im Hochformat. Sie können überprüfen, mit welcher Ausrichtung Sie CSS-Medienabfragen verwenden.
%Vor%Als Zweites sollten Sie Retina-Bilder für alle Ihre Bilder mit der Eigenschaft CSS-Hintergrundgröße bereitstellen. Da Ihre virtuelle Seitenbreite 320px beträgt, ist jedes Pixel wirklich 2px mal 2px auf einem Retina-Display. Wenn Sie ein 40x40-Bild in einer 20x20-Box aufstellen, werden die Retina-Displays es so anzeigen, wie es ist, und nicht-Retina-Displays werden die Pixel verkleinert.
%Vor%Dies sollte auch funktionieren, wenn Sie ein Bild-Tag verwenden:
%Vor%Sie könnten wahrscheinlich mehr tun, um die tatsächliche Bildschirmgröße zu überprüfen und kleinere Bilder für die Nicht-Retinamasse zu liefern, aber ich denke nicht, dass der Vorteil so dramatisch sein wird.
Jede Einheit, die Sie auf einem Retina-Display verwenden, ist immer noch die gleiche, Sie müssen also nur alle Bilder durch eine 2x-Version ersetzen.
Sie können window.devicePixelRatio verwenden, um zu erkennen, ob Ihre Webanwendung auf einem Retina-Display ausgeführt wird. Wenn window.devicePixelRatio > 1 , dann ist es eine Retina-Anzeige. Dann können Sie jedes Bild auf der Client-Seite ersetzen:
<img /> und ersetze src attribute. background-image . canvas verwenden, erstellen Sie eine 2x Dichte und verwenden Sie 2x Bilder. Das heißt, wenn Sie mit einem Element 100px * 100px <canvas></canvas> arbeiten, legen Sie den Inhalt auf 200px * 200px fest. Tags und Links cordova iphone ios html5 jquery-mobile