Beginnen wir einfach mit der Größe des
Geräts, auf dem wir ausgeführt werden. Im Moment habe ich hier relativ große Emulatoren und ich werde dies jetzt ändern
und ich werde es
auf Android ändern, aber natürlich könnten wir das gleiche auf iOS tun. Hier auf Android und ich werde ein neues virtuelles
Gerät erstellen, das tatsächlich viel kleiner ist,
und dafür werde ich in meiner Liste der Bilder hier beim Erstellen eines neuen virtuellen Geräts ein super kleines
Gerät
wie dieses auswählen 3. 7 Zoll Telefon hier.
Nun eine wichtige Randnotiz: Sie denken vielleicht, dass nicht mehr viele Benutzer so kleine Geräte verwenden, aber das
hängt wirklich von dem Markt ab, auf den Sie abzielen.
Wenn Sie hauptsächlich auf die USA abzielen, müssen Sie Ihre App möglicherweise nicht wirklich für kleine Geräte optimieren,
aber wenn Sie
auf die ganze Welt oder einige Schwellenländer abzielen, sieht das anders aus, also möchten Sie es
auf jeden Fall um zu wissen, was Ihr Ziel ist und welche Geräte Ihre Zielbenutzer verwenden.
Also werde ich dieses Gerät hier erstellen, ein relativ kleines, einfach hier klicken, Android Pie in meinem Fall hier
als Android-Version auswählen und dann fertig stellen und dies
wird dieses virtuelle Gerät erstellen und jetzt werde ich es auch starten.
Jetzt wird dies gestartet, auf meinem zweiten Bildschirm werde ich es in einer Sekunde
hierher zurückbringen, ich werde dieses
Android-Gerät für den Moment schließen, dieses größere und hier ist mein kleineres, das hochfährt.
Lassen Sie mich dies auch ein wenig erhöhen, und dies vergrößert nur die Größe, in der wir es sehen
können, nicht die Größe des Telefons. Wie Sie
bereits sehen können, handelt es sich definitiv um ein kleineres Gerät mit weniger Pixeln, die sowohl auf dem als auch auf
dem Telefon verfügbar sind Höhe und Breite.
Damit bin ich bereits wieder in meinem Projekt. Dies ist das Projekt, an dem
wir in den letzten Abschnitten gearbeitet haben. Sie finden es im Anhang,
falls Sie hier nicht mitgemacht haben und ich meinen Expo-Server bereits mit npm start
and by gestartet habe Wenn ich a treffe, installiere ich jetzt expo und dann diese App hier auf diesem Emulator.
Warten wir also, bis dies abgeschlossen und gestartet ist. Hier ist meine App. Wir können bereits feststellen, dass unsere
App sicherlich nicht für kleinere Bildschirme optimiert ist. Hier
sind die Schaltflächen nicht wirklich so gut positioniert, dass dort etwas nicht stimmt. Jetzt
wollen wir sehen, wie es funktioniert, wenn Wir starten das Spiel.
Nun, hier scheint dies zu funktionieren. Wenn ich auf "Spiel starten" klicke, funktioniert das hier sicherlich, aber wir haben ein Problem auf unserem Startbildschirm und vielleicht möchten wir hier auch
einige Größen ändern, vielleicht möchten wir den Rand entfernen oder Reduzieren Sie den
Abstand, den wir zwischen dieser Zahl und dieser Box haben, mit unseren Eingaben hier. Vielleicht möchten wir die
Breite unserer Boxen dort unten erhöhen, unser Protokoll der Runden, die wir hatten. Vielleicht möchten wir dort etwas ändern und wann
das Spiel ist Vielleicht möchten wir die Größe des Bildes ein wenig verkleinern,
aber weil dies sehr groß ist und tatsächlich einen großen Nachteil hat, weil
diese Seite nicht scrollbar ist, kann ich die neue
Spielschaltfläche nicht erreichen echter Spielbrecher, es
bricht wirklich unser Spiel, dieser Abstand hier ist auch etwas zu groß zwischen dem Bild
und dem Text.
Es gibt eine Menge Arbeit zu erledigen, nur weil wir uns auf einem
kleineren Gerät befinden. Dies berücksichtigt nicht einmal die Tatsache, dass unsere Benutzer das Gerät möglicherweise drehen, das im Moment ohnehin deaktiviert
ist, und deshalb werde ich darauf zurückkommen dies und wie man es in einer Sekunde aktiviert.
Lassen Sie uns also daran arbeiten und lernen, wie wir unseren von uns verteilten Speicherplatz und die von uns
verwendeten Größen dynamischer berechnen und sicherstellen können, dass unsere App auf allen Arten von Geräten gut aussieht.