1
00:00:02,350 --> 00:00:07,180
Quindi, nel nostro codice, qui nella schermata di avvio del gioco che è la prima schermata

2
00:00:07,370 --> 00:00:13,070
che vediamo, potremmo già vedere che i nostri due pulsanti - ripristina e conferma non erano posizionati così bene

3
00:00:13,160 --> 00:00:14,980
nel nostro contenitore di pulsanti.

4
00:00:15,080 --> 00:00:21,650
Quindi diamo un'occhiata allo stile che abbiamo impostato laggiù e ciò che possiamo vedere qui è che

5
00:00:21,650 --> 00:00:24,790
assegniamo la larghezza del 100% sul contenitore

6
00:00:24,830 --> 00:00:28,380
dei pulsanti, ma a cosa si riferisce questa dimensione?

7
00:00:28,400 --> 00:00:34,820
Bene, questa dimensione in questa vista qui, ovviamente se diciamo 100%, alla fine si riferisce al genitore circostante

8
00:00:34,820 --> 00:00:38,150
che in questo caso è questa carta, questo contenitore

9
00:00:38,150 --> 00:00:46,370
di input e su questo contenitore di input, in realtà impostiamo una larghezza di 300 e che semplicemente è troppo piccolo, combinato con

10
00:00:46,370 --> 00:00:52,640
i nostri pulsanti che abbiamo una larghezza fissa di 100, otteniamo questo aspetto che non vogliamo, che possiamo

11
00:00:52,640 --> 00:00:58,570
comunque vedere se cambiamo qualcosa in modo che la nostra app si ricostruisca e quindi si riavvii,

12
00:00:58,590 --> 00:01:01,280
quindi vediamo di nuovo quella schermata di avvio,

13
00:01:01,340 --> 00:01:03,530
ecco l'aspetto che non vogliamo.

14
00:01:03,530 --> 00:01:06,210
Quindi cosa vogliamo qui?

15
00:01:06,210 --> 00:01:13,500
Beh, forse non vogliamo la larghezza di 300 qui, ma una larghezza più flessibile. Stiamo impostando una larghezza massima dell'80%, quello che potremmo

16
00:01:13,500 --> 00:01:22,020
fare qui è che potremmo sempre impostare una larghezza diciamo 80 o 90% e semplicemente assicurarci che questa abbia sempre una

17
00:01:23,790 --> 00:01:31,230
larghezza minima di 300, in modo da avere sempre almeno così tanti pixel nel caso in cui abbiamo un

18
00:01:31,230 --> 00:01:36,180
piccolo dispositivo in cui l'80% sarebbe inferiore a quello e che abbiamo

19
00:01:36,180 --> 00:01:39,750
almeno questo e ora questo apparirebbe meglio qui.

20
00:01:39,750 --> 00:01:40,630
Perché?

21
00:01:40,710 --> 00:01:43,520
Perché ora abbiamo l'80% come valore predefinito e

22
00:01:43,620 --> 00:01:46,070
prima lo avevamo come larghezza massima.

23
00:01:46,650 --> 00:01:50,280
Quindi ora impostandolo su un valore predefinito, questo assicura che questo non sia il nostro limite,

24
00:01:50,280 --> 00:01:51,830
invece è la nostra dimensione predefinita

25
00:01:51,840 --> 00:01:57,030
ma abbiamo anche impostato che vogliamo avere una larghezza minima di 300. Su questo piccolo dispositivo, questa larghezza

26
00:01:57,060 --> 00:02:02,760
minima sta annullando la nostra larghezza predefinita perché l'80% sarebbe effettivamente inferiore a 300

27
00:02:02,760 --> 00:02:04,730
su questo piccolo dispositivo.

28
00:02:04,740 --> 00:02:10,200
Ora, naturalmente, potresti avere un dispositivo ancora più piccolo in cui questa regola porta tuttavia a un problema

29
00:02:10,200 --> 00:02:16,950
in cui una larghezza minima di 300 significa sostanzialmente che il tuo dispositivo è più piccolo di quello, non è abbastanza largo

30
00:02:16,950 --> 00:02:20,800
e quindi, il tuo contenitore andrebbe oltre i confini del nostro schermo.

31
00:02:20,820 --> 00:02:26,070
Quindi questa potrebbe non essere la regola perfetta, ma è sicuramente meglio come possiamo vedere qui perché sullo

32
00:02:26,070 --> 00:02:30,900
schermo più grande, questo sembra ancora buono qui su iPhone, sullo schermo più piccolo, ora sembra

33
00:02:30,900 --> 00:02:31,800
anche buono.

34
00:02:31,800 --> 00:02:38,730
Ora per assicurarci di non lasciare mai i nostri confini, possiamo anche impostare una larghezza massima e impostarla in modo da dire il

35
00:02:38,970 --> 00:02:42,920
95% in modo da avere almeno un po 'di spazio attorno ad esso.

36
00:02:42,960 --> 00:02:50,340
Ora assicuriamo che il nostro contenitore non andrà mai fuori dal nostro schermo ma cerca di prendere l'80% ma nel caso

37
00:02:50,670 --> 00:02:53,780
in cui abbiamo uno schermo super piccolo, ne

38
00:02:53,790 --> 00:02:57,840
occorreranno 300 ma, di nuovo, mai più del 95% della larghezza disponibile.

39
00:02:58,440 --> 00:03:04,440
Quindi ora abbiamo semplicemente impostato regole più flessibili qui che funzionano su una gamma più ampia di dispositivi che, come puoi

40
00:03:04,500 --> 00:03:06,390
dire, qui è un po 'meglio.