1 00:00:02,240 --> 00:00:05,740 Beginnen wir einfach mit der Größe des 2 00:00:05,750 --> 00:00:12,140 Geräts, auf dem wir ausgeführt werden. Im Moment habe ich hier relativ große Emulatoren und ich werde dies jetzt ändern 3 00:00:12,140 --> 00:00:13,090 und ich werde es 4 00:00:13,100 --> 00:00:18,620 auf Android ändern, aber natürlich könnten wir das gleiche auf iOS tun. Hier auf Android und ich werde ein neues virtuelles 5 00:00:18,620 --> 00:00:20,690 Gerät erstellen, das tatsächlich viel kleiner ist, 6 00:00:20,690 --> 00:00:26,570 und dafür werde ich in meiner Liste der Bilder hier beim Erstellen eines neuen virtuellen Geräts ein super kleines 7 00:00:26,660 --> 00:00:27,410 Gerät 8 00:00:27,410 --> 00:00:30,040 wie dieses auswählen 3. 7 Zoll Telefon hier. 9 00:00:30,050 --> 00:00:36,290 Nun eine wichtige Randnotiz: Sie denken vielleicht, dass nicht mehr viele Benutzer so kleine Geräte verwenden, aber das 10 00:00:36,470 --> 00:00:39,980 hängt wirklich von dem Markt ab, auf den Sie abzielen. 11 00:00:39,980 --> 00:00:45,980 Wenn Sie hauptsächlich auf die USA abzielen, müssen Sie Ihre App möglicherweise nicht wirklich für kleine Geräte optimieren, 12 00:00:45,980 --> 00:00:47,360 aber wenn Sie 13 00:00:47,360 --> 00:00:52,910 auf die ganze Welt oder einige Schwellenländer abzielen, sieht das anders aus, also möchten Sie es 14 00:00:52,910 --> 00:00:58,340 auf jeden Fall um zu wissen, was Ihr Ziel ist und welche Geräte Ihre Zielbenutzer verwenden. 15 00:00:59,150 --> 00:01:06,170 Also werde ich dieses Gerät hier erstellen, ein relativ kleines, einfach hier klicken, Android Pie in meinem Fall hier 16 00:01:06,170 --> 00:01:09,640 als Android-Version auswählen und dann fertig stellen und dies 17 00:01:09,770 --> 00:01:14,190 wird dieses virtuelle Gerät erstellen und jetzt werde ich es auch starten. 18 00:01:14,240 --> 00:01:19,740 Jetzt wird dies gestartet, auf meinem zweiten Bildschirm werde ich es in einer Sekunde 19 00:01:19,770 --> 00:01:22,110 hierher zurückbringen, ich werde dieses 20 00:01:22,110 --> 00:01:27,330 Android-Gerät für den Moment schließen, dieses größere und hier ist mein kleineres, das hochfährt. 21 00:01:27,430 --> 00:01:33,550 Lassen Sie mich dies auch ein wenig erhöhen, und dies vergrößert nur die Größe, in der wir es sehen 22 00:01:33,580 --> 00:01:36,300 können, nicht die Größe des Telefons. Wie Sie 23 00:01:36,420 --> 00:01:43,010 bereits sehen können, handelt es sich definitiv um ein kleineres Gerät mit weniger Pixeln, die sowohl auf dem als auch auf 24 00:01:43,010 --> 00:01:45,640 dem Telefon verfügbar sind Höhe und Breite. 25 00:01:45,660 --> 00:01:50,360 Damit bin ich bereits wieder in meinem Projekt. Dies ist das Projekt, an dem 26 00:01:50,380 --> 00:01:54,900 wir in den letzten Abschnitten gearbeitet haben. Sie finden es im Anhang, 27 00:01:54,900 --> 00:01:59,730 falls Sie hier nicht mitgemacht haben und ich meinen Expo-Server bereits mit npm start 28 00:01:59,730 --> 00:02:06,410 and by gestartet habe Wenn ich a treffe, installiere ich jetzt expo und dann diese App hier auf diesem Emulator. 29 00:02:06,510 --> 00:02:13,460 Warten wir also, bis dies abgeschlossen und gestartet ist. Hier ist meine App. Wir können bereits feststellen, dass unsere 30 00:02:13,550 --> 00:02:17,200 App sicherlich nicht für kleinere Bildschirme optimiert ist. Hier 31 00:02:17,210 --> 00:02:22,060 sind die Schaltflächen nicht wirklich so gut positioniert, dass dort etwas nicht stimmt. Jetzt 32 00:02:22,060 --> 00:02:26,090 wollen wir sehen, wie es funktioniert, wenn Wir starten das Spiel. 33 00:02:26,090 --> 00:02:37,490 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 34 00:02:37,550 --> 00:02:42,670 einige Größen ändern, vielleicht möchten wir den Rand entfernen oder Reduzieren Sie den 35 00:02:42,670 --> 00:02:49,730 Abstand, den wir zwischen dieser Zahl und dieser Box haben, mit unseren Eingaben hier. Vielleicht möchten wir die 36 00:02:50,330 --> 00:02:58,490 Breite unserer Boxen dort unten erhöhen, unser Protokoll der Runden, die wir hatten. Vielleicht möchten wir dort etwas ändern und wann 37 00:02:58,490 --> 00:03:03,590 das Spiel ist Vielleicht möchten wir die Größe des Bildes ein wenig verkleinern, 38 00:03:03,590 --> 00:03:08,570 aber weil dies sehr groß ist und tatsächlich einen großen Nachteil hat, weil 39 00:03:08,810 --> 00:03:12,320 diese Seite nicht scrollbar ist, kann ich die neue 40 00:03:12,470 --> 00:03:14,950 Spielschaltfläche nicht erreichen echter Spielbrecher, es 41 00:03:15,140 --> 00:03:20,740 bricht wirklich unser Spiel, dieser Abstand hier ist auch etwas zu groß zwischen dem Bild 42 00:03:20,780 --> 00:03:22,280 und dem Text. 43 00:03:22,280 --> 00:03:26,000 Es gibt eine Menge Arbeit zu erledigen, nur weil wir uns auf einem 44 00:03:26,000 --> 00:03:31,610 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 45 00:03:31,640 --> 00:03:36,150 ist, und deshalb werde ich darauf zurückkommen dies und wie man es in einer Sekunde aktiviert. 46 00:03:36,170 --> 00:03:43,010 Lassen Sie uns also daran arbeiten und lernen, wie wir unseren von uns verteilten Speicherplatz und die von uns 47 00:03:43,010 --> 00:03:49,160 verwendeten Größen dynamischer berechnen und sicherstellen können, dass unsere App auf allen Arten von Geräten gut aussieht.