1 00:00:02,240 --> 00:00:05,740 Vamos começar com o tamanho do 2 00:00:05,750 --> 00:00:12,140 dispositivo em que estamos rodando. No momento, tenho emuladores relativamente grandes aqui e agora vou mudar isso e 3 00:00:12,140 --> 00:00:13,090 vou mudar no 4 00:00:13,100 --> 00:00:18,620 Android, mas é claro que poderíamos fazer o mesmo no iOS. Aqui no Android e vou criar um novo dispositivo 5 00:00:18,620 --> 00:00:20,690 virtual que é realmente muito menor 6 00:00:20,690 --> 00:00:26,570 e, para isso, na minha lista de imagens aqui ao criar um novo dispositivo virtual, vou escolher um 7 00:00:26,660 --> 00:00:27,410 super 8 00:00:27,410 --> 00:00:30,040 pequeno como este 3. Telefone de 7 polegadas aqui. 9 00:00:30,050 --> 00:00:36,290 Agora, uma observação importante: você pode estar pensando que muitos usuários não usam mais esses dispositivos pequenos, mas 10 00:00:36,470 --> 00:00:39,980 isso realmente depende do mercado que você está alvejando. 11 00:00:39,980 --> 00:00:45,980 Se você está segmentando principalmente para os EUA, então talvez você não precise otimizar seu aplicativo para dispositivos 12 00:00:45,980 --> 00:00:47,360 pequenos, mas se você 13 00:00:47,360 --> 00:00:52,910 está segmentando para o mundo inteiro ou talvez para alguns países emergentes, então isso parece diferente, então 14 00:00:52,910 --> 00:00:58,340 você definitivamente quer para saber qual é o seu destino e quais dispositivos seus usuários-alvo usam. 15 00:00:59,150 --> 00:01:06,170 Então, eu vou criar esse dispositivo aqui, relativamente pequeno, basta clicar em Avançar aqui, escolher a torta Android no 16 00:01:06,170 --> 00:01:09,640 meu caso aqui como a versão Android e finalizar 17 00:01:09,770 --> 00:01:14,190 isso. Agora, isso criará esse dispositivo virtual e agora também o lançarei. 18 00:01:14,240 --> 00:01:19,740 Então, agora isso está inicializando, na minha segunda tela, trago de volta aqui 19 00:01:19,770 --> 00:01:22,110 em um segundo, fecharei este 20 00:01:22,110 --> 00:01:27,330 dispositivo Android no momento, este maior e aqui está o menor, inicializando. 21 00:01:27,430 --> 00:01:33,550 Então, deixe-me também aumentar um pouco isso e isso apenas aumenta o tamanho em que 22 00:01:33,580 --> 00:01:36,300 podemos vê-lo, não a dimensão do telefone 23 00:01:36,420 --> 00:01:43,010 e, como você já pode ver, esse é definitivamente um dispositivo menor com menos pixels disponíveis 24 00:01:43,010 --> 00:01:45,640 tanto no altura e largura. 25 00:01:45,660 --> 00:01:50,360 Então, agora com isso, eu já estou de volta ao meu projeto, este 26 00:01:50,380 --> 00:01:54,900 é o projeto em que trabalhamos nas últimas seções e você o 27 00:01:54,900 --> 00:01:59,730 encontra anexado caso não tenha seguido aqui e eu já iniciei meu servidor expo 28 00:01:59,730 --> 00:02:06,410 com o npm start e por pressionando a, agora instalo o expo e, em seguida, este aplicativo aqui neste emulador. 29 00:02:06,510 --> 00:02:13,460 Então, vamos esperar que isso termine e inicie. Aqui está o meu aplicativo e já podemos dizer que nosso 30 00:02:13,550 --> 00:02:17,200 aplicativo certamente não está otimizado para telas menores. Aqui, 31 00:02:17,210 --> 00:02:22,060 os botões não estão realmente posicionados tão bem, então algo está errado lá e 32 00:02:22,060 --> 00:02:26,090 agora vamos ver como ele funciona quando nós começamos o jogo. 33 00:02:26,090 --> 00:02:37,490 Bem, aqui isso parece funcionar, se eu clicar em Iniciar jogo, isso certamente está funcionando aqui, mas temos um problema na tela inicial e talvez aqui, desejemos alterar alguns tamanhos 34 00:02:37,550 --> 00:02:42,670 também, talvez desejemos remover a margem ou reduza a margem que temos entre 35 00:02:42,670 --> 00:02:49,730 esse número e esta caixa com nossas entradas aqui, talvez queira aumentar a largura de nossas caixas lá 36 00:02:50,330 --> 00:02:58,490 embaixo, nosso registro das rodadas que tivemos, talvez queira mudar alguma coisa lá e quando o jogo terminar talvez você queira 37 00:02:58,490 --> 00:03:03,590 reduzir um pouco o tamanho da imagem, mas como essa é super grande 38 00:03:03,590 --> 00:03:08,570 e realmente tem uma grande desvantagem, porque como essa página não é rolável, 39 00:03:08,810 --> 00:03:12,320 não consigo acessar o novo botão do jogo, então 40 00:03:12,470 --> 00:03:14,950 é uma quebra-jogo real, está realmente 41 00:03:15,140 --> 00:03:20,740 quebrando nosso jogo, essa distância aqui também é um pouco grande demais entre a imagem 42 00:03:20,780 --> 00:03:22,280 e o texto. 43 00:03:22,280 --> 00:03:26,000 Há muito trabalho a fazer apenas porque estamos em um dispositivo menor, 44 00:03:26,000 --> 00:03:31,610 isso nem mesmo respeita o fato de que nossos usuários podem girar o dispositivo que, a propósito, no momento está 45 00:03:31,640 --> 00:03:36,150 desativado de qualquer maneira e, então, voltarei a isso e como habilitá-lo em um segundo. 46 00:03:36,170 --> 00:03:43,010 Então, vamos começar a trabalhar nisso e vamos aprender como podemos realmente calcular nosso espaço que estamos distribuindo, os tamanhos que usamos 47 00:03:43,010 --> 00:03:49,160 de maneira mais dinâmica e garantir que nosso aplicativo tenha uma boa aparência em todos os tipos de dispositivos.