Cominciamo semplice con le dimensioni del dispositivo
su cui siamo in esecuzione. In questo momento ho emulatori relativamente grandi qui e ora lo cambierò
e lo cambierò
su Android, ma ovviamente potremmo fare lo stesso su iOS. Qui su Android e creerò un nuovo dispositivo virtuale
che è in realtà molto più piccolo
e per quello nella mia lista di immagini qui quando creerò un nuovo dispositivo virtuale, ne sceglierò uno
super
piccolo come questo 3. Telefono da 7 pollici qui.
Ora, una nota a margine importante, potresti pensare che non molti utenti utilizzano più dispositivi così
piccoli, ma ciò dipende davvero dal mercato di destinazione.
Se ti rivolgi principalmente agli Stati Uniti, forse non hai davvero bisogno di ottimizzare la tua app per dispositivi
di piccole dimensioni, ma
se stai prendendo di mira tutto il mondo o forse alcuni paesi emergenti, allora sembra diverso, quindi
sicuramente vuoi per sapere qual è il tuo target e quali dispositivi utilizzano gli utenti target.
Quindi creerò questo dispositivo qui, uno relativamente piccolo, semplicemente fai clic qui accanto, seleziono la torta Android nel mio
caso qui come versione Android e quindi finisco questo
e ora questo creerà questo dispositivo virtuale e ora lo lancerò anche.
Quindi ora questo si sta avviando, sul mio secondo schermo lo riporto qui tra un
secondo, per il momento chiuderò questo
dispositivo Android, questo più grande ed ecco il mio più piccolo che si avvia.
Consentitemi inoltre di aumentare un po 'questo e questo aumenta solo le dimensioni in cui
possiamo vederlo, non la dimensione del telefono
e, come si può già dire, questo è sicuramente un dispositivo più piccolo con meno pixel disponibili
sia sul altezza e larghezza.
Quindi ora con questo, sono già tornato nel mio progetto, questo è il
progetto a cui abbiamo lavorato nelle ultime sezioni e lo trovi allegato
nel caso in cui non avessi seguito qui e ho già avviato il mio
server expo con npm start e by colpendo a, ora installo expo e quindi questa app qui su questo emulatore.
Quindi aspettiamo che questo finisca e si avvii ed ecco la mia app e possiamo già dire che la
nostra app non è certamente ottimizzata per schermi più
piccoli, qui i pulsanti non sono posizionati così bene quindi qualcosa non va
lì e ora vediamo come funziona quando iniziamo il gioco.
Bene, qui sembra che funzioni, se faccio clic su Avvia gioco, sicuramente funziona qui, ma abbiamo un problema nella schermata iniziale e forse qui, vogliamo cambiare anche alcune dimensioni, forse
vogliamo rimuovere il margine o ridurre il margine che abbiamo tra questo numero
e questa casella con i nostri input qui, forse vogliamo aumentare la larghezza delle nostre scatole laggiù, il
nostro registro dei round che abbiamo avuto, quindi forse vogliamo cambiare qualcosa lì e quando il gioco è forse vogliamo ridurre
un po 'le dimensioni dell'immagine, ma poiché questo è molto grande e in
realtà ha un enorme svantaggio perché poiché questa pagina non è scorrevole, non
riesco a raggiungere il nuovo pulsante di gioco, quindi
è un vero game breaker, sta
davvero rompendo il nostro gioco, anche questa distanza è un po 'troppo grande tra l'immagine
e il testo.
C'è un sacco di lavoro da fare solo perché siamo su un
dispositivo più piccolo, questo non rispetta nemmeno il fatto che i nostri utenti potrebbero ruotare il dispositivo che comunque
al momento è disabilitato e quindi tornerò a questo e come abilitarlo in un secondo.
Quindi iniziamo a lavorare su questo e impariamo come possiamo effettivamente calcolare il nostro spazio che stiamo distribuendo, le dimensioni che utilizziamo
in un modo più dinamico e assicuriamo che la nostra app appaia bene su tutti i tipi di dispositivi.