Tutorial zur mobilen Entwicklung: Zusammenfassung der Pixelanzeigeprobleme

Vorwort

Ich bin davon überzeugt, dass bei der Entwicklung mobiler Endgeräte jeder feststellen wird, dass sich die Anzeige mobiler Endgeräte grundsätzlich von der Anzeige von Desktop-Endgeräten unterscheidet. Wenn beispielsweise ein Blockelement mit 1334 x 750 Pixeln auf dem iPhone 6 angezeigt wird, stellen wir fest, dass dieses Blockelement mit 1334 x 750 Pixeln nicht den gesamten Bildschirm abdecken kann, obwohl die nominale Bildschirmpixeldichte des iPhone 6 auf der offiziellen Website von Apple 1334 x 750 beträgt.

Warum ist das so? Im Folgenden wird hierauf unter verschiedenen Aspekten eingegangen.

Pixeldichte (PPI)

PPI (Pixel Per Inch) bedeutet, wie viele Pixel pro Zoll vorhanden sind, was der Bevölkerungsdichte und Gebäudedichte ähnelt. Die folgende Abbildung zeigt mehrere Beispiele für die PPI-Darstellung.

Am Beispiel des iPhone 6 lautet die allgemeine Berechnungsformel für die Pixeldichte: Math.sqrt(1366*1366 + 640*640)

Um diese PPI zu berechnen, müssen wir zunächst wissen, wie viele Pixel sich auf dem Bildschirm des Geräts befinden. Dies ist das erste Pixel in Pixel pro Zoll.

Gerätepixel (DP) und Gerätepixelverhältnis (DPR)

Gerätepixel, auch als physisches Pixel bekannt, ist die Bildschirmspezifikation des iPhone 6, die am Anfang dieses Artikels erwähnt wurde. Die in der Pixeldichte genannten Pixel sind Gerätepixel. Bei allgemeinen Anzeigegeräten entspricht ein Pixel einem leuchtenden Punkt auf dem Bildschirm, daher wird PPI auch als DPI (dots per inch) bezeichnet, was jedoch nur bei Anzeigegeräten, wie z. B. Druckern, gilt.

Da die Bildschirmspezifikationen der einzelnen Mobiltelefone auf dem Markt unterschiedlich sind, einige sind 720P, einige sind 1080P und sogar 2K usw., haben einige dieser Geräte mehr Pixel und einige haben weniger Pixel. Wenn das gleiche Pixel angezeigt wird, tritt die folgende Situation auf:

Je höher die PPI des Bildschirms, desto kleiner ist die Fläche, die ein Pixel anzeigt. Wenn ein Bild mit 4x4 Pixeln auf einem Bildschirm mit 64 PPI angezeigt wird, wird es auf einem Bildschirm mit 256 PPI auf die Hälfte seiner Originalgröße verkleinert.

Umgekehrt müssen Sie das Bild um das Zweifache vergrößern, wenn Sie auf einem Bildschirm mit 256 PPI den gleichen Anzeigeeffekt erzielen möchten wie auf einem Bildschirm mit 64 PPI.

Um die Benutzerfreundlichkeit der Geräte zu gewährleisten, d. h. Symbole und Texte können korrekt identifiziert und präzise angeklickt werden, müssen Hersteller bei Mobiltelefonen mit hochauflösenden Bildschirmen sicherstellen, dass alle Arten von Inhalten auf ihren Geräten genauso angezeigt werden wie auf Geräten mit Standardauflösung. Die Lösung besteht darin, alle Größen um ein Vielfaches zu vergrößern. Dieses Vergrößerungsverhältnis wird als Gerätepixelverhältnis (Device Pixel Ratio, DPR) bezeichnet. Im Allgemeinen entspricht das DPR der folgenden Tabelle:

Daher sollten hochauflösende Geräte mit einer hochauflösenden Bildanzeige ausgestattet sein, da das Bild sonst nach der Vergrößerung auf dem hochauflösenden Gerät nicht genügend Pixel hat, um seine Details anzuzeigen, und das Bild sehr unscharf wird.

CSS-Pixel

Nachdem so viele Konzepte besprochen wurden, scheint die Frage am Anfang des Artikels nicht gut erklärt worden zu sein. Nachdem wir unten die CSS-Pixel besprochen haben, dürfte jeder ein klareres Konzept haben.

Beim Schreiben von CSS verwenden wir häufig die Pixeleinheit px, aber diese Pixeleinheit entspricht nicht immer eins zu eins dem Gerätepixel. Das heißt, 1px (Pixel) in CSS entspricht nicht einem Pixel auf dem Gerätebildschirm. Zur Unterscheidung von Gerätepixeln werden die in CSS mit px bezeichneten Pixel allgemein als CSS-Pixel bezeichnet. Das heißt, ein CSS-Pixel ist eine virtuelle, relative Einheit.

Wenn wir beispielsweise ein 300 Pixel breites Blockelement auf eine Seite zeichnen, nimmt es auf einem normalen Monitor nur einen Teil des Bildschirms ein. Wenn wir jedoch manuell in die Seite hineinzoomen, füllt das Blockelement bald die gesamte Seite. Dies zeigt, dass das CSS-Pixel im Allgemeinen der Pixelgröße bei der Systemauflösung entspricht, d. h. auf einem Gerät mit Standardauflösung sollte ein CSS-Pixel der Pixelgröße eines Geräts entsprechen. Auf hochauflösenden Geräten oder wenn der Benutzer hinein- und herauszoomt, kann ein CSS-Pixel jedoch mehreren Gerätepixeln entsprechen.

Um ein weiteres Beispiel zu nennen: Wenn Sie bei der Entwicklung nativer mobiler Anwendungen in Einheiten von einem Gerätepixel entwickeln müssen, ist dies sehr mühsam, da nicht jedes Mobilgerät eine Systemauflösung hat, die einem Gerätepixel entspricht. Manche sind 1:2 und manche 1:2,46. Genau wegen dieses Unterschieds gibt es in der Android-Entwicklung Einheiten wie dp und dt (in iOS gibt es pt-Einheiten). Wenn wir die Größe eines Elements definieren, müssen wir nur einen dp-Wert angeben. Das System konvertiert diesen Wert mit dem Verhältnis von Systemauflösung zu Gerätepixeln (also DPR) und berechnet schließlich die tatsächlich auf dem Bildschirm angezeigten Gerätepixel.

Die oben erwähnte abstrakte Einheit von dp wird geräteunabhängiges Pixel genannt. Natürlich sind CSS-Pixel auch geräteunabhängige Pixel. Wenn wir CSS-Pixel schreiben, müssen wir uns keine Gedanken darüber machen, wie vielen Gerätepixeln ein CSS-Pixel entspricht. Das System berechnet dies automatisch für uns basierend auf DPR. Dabei muss nur darauf geachtet werden, dass die Elemente der Webseite auch bei einer Vergrößerung durch die Systemumstellung noch immer gut auf dem Endgerät dargestellt werden können.

Ansichtsfenster

Wenn Sie eine Seite auf einem Mobilgerät öffnen, rendert der Browser die Seite normalerweise zunächst in einem normalen Seitenverhältnis und stellt dann automatisch ein Seitenverhältnis ein, um die Seite zu skalieren. Dies dient einer besseren Anzeige des Inhalts, d. h. der Seiteninhalt füllt einfach den gesamten Bildschirm des Mobiltelefons aus. Wenn die Seite die Skalierung des Benutzers nicht verhindert, können Sie die Seite natürlich auch mit zwei Fingern wieder auf das ursprüngliche Seitenverhältnis skalieren. Dieser gesamte Vorgang wird über das Ansichtsfenster erreicht. Nachdem die Originalseite gerendert wurde, wird sie über das Ansichtsfenster so skaliert, dass sie der Systembreite entspricht, sodass die Seite vollständig angezeigt werden kann.

(Bild vom Teamblog von tgideas)

Wir können die Skalierung des Ansichtsfensters beim Rendern steuern, indem wir dem Inhalt die Eigenschaft „inital-scale“ hinzufügen. Wenn sie auf 1 gesetzt wird, erfolgt keine Skalierung.

<meta name="Ansichtsfenster" content="Anfangsmaßstab=1">

Wir können auch die Eigenschaft „device-width“ definieren, um die Breite des Ansichtsfensters zu steuern

<meta name="viewport" content="width=Gerätebreite">

Im Allgemeinen legen wir es bei der mobilen Entwicklung so fest, dass Benutzer nicht zoomen können, und setzen die maximalen und minimalen Zoomverhältnisse auf 1.

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Mindestmaßstab=1, Höchstmaßstab=1, benutzerdefiniert skalierbar=nein">

Zusammenfassung

Nachdem ich mehrere Tage lang Materialien gelesen und herumgestöbert habe, verfüge ich endlich über ein vollständiges und genaues Verständnis der grundlegendsten Aspekte der mobilen Entwicklung. Vorher habe ich einfach den Code von Meta kopiert und verwendet, ohne ihn zu verstehen. Dieses Mal habe ich meine Freizeit und die verfügbaren relevanten Materialien genutzt, um alles durchzugehen, und es schließlich in diesem Dokument festgehalten, in der Hoffnung, dass es in Zukunft für alle hilfreich sein wird.

Informationen zur Teilnahme:

1. Tiefgreifendes Verständnis von Ansichtsfenster und px

2. Leistungsstarke, responsive Webentwicklung