Vamos começar com o tamanho do
dispositivo em que estamos rodando. No momento, tenho emuladores relativamente grandes aqui e agora vou mudar isso e
vou mudar no
Android, mas é claro que poderíamos fazer o mesmo no iOS. Aqui no Android e vou criar um novo dispositivo
virtual que é realmente muito menor
e, para isso, na minha lista de imagens aqui ao criar um novo dispositivo virtual, vou escolher um
super
pequeno como este 3. Telefone de 7 polegadas aqui.
Agora, uma observação importante: você pode estar pensando que muitos usuários não usam mais esses dispositivos pequenos, mas
isso realmente depende do mercado que você está alvejando.
Se você está segmentando principalmente para os EUA, então talvez você não precise otimizar seu aplicativo para dispositivos
pequenos, mas se você
está segmentando para o mundo inteiro ou talvez para alguns países emergentes, então isso parece diferente, então
você definitivamente quer para saber qual é o seu destino e quais dispositivos seus usuários-alvo usam.
Então, eu vou criar esse dispositivo aqui, relativamente pequeno, basta clicar em Avançar aqui, escolher a torta Android no
meu caso aqui como a versão Android e finalizar
isso. Agora, isso criará esse dispositivo virtual e agora também o lançarei.
Então, agora isso está inicializando, na minha segunda tela, trago de volta aqui
em um segundo, fecharei este
dispositivo Android no momento, este maior e aqui está o menor, inicializando.
Então, deixe-me também aumentar um pouco isso e isso apenas aumenta o tamanho em que
podemos vê-lo, não a dimensão do telefone
e, como você já pode ver, esse é definitivamente um dispositivo menor com menos pixels disponíveis
tanto no altura e largura.
Então, agora com isso, eu já estou de volta ao meu projeto, este
é o projeto em que trabalhamos nas últimas seções e você o
encontra anexado caso não tenha seguido aqui e eu já iniciei meu servidor expo
com o npm start e por pressionando a, agora instalo o expo e, em seguida, este aplicativo aqui neste emulador.
Então, vamos esperar que isso termine e inicie. Aqui está o meu aplicativo e já podemos dizer que nosso
aplicativo certamente não está otimizado para telas menores. Aqui,
os botões não estão realmente posicionados tão bem, então algo está errado lá e
agora vamos ver como ele funciona quando nós começamos o jogo.
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
também, talvez desejemos remover a margem ou reduza a margem que temos entre
esse número e esta caixa com nossas entradas aqui, talvez queira aumentar a largura de nossas caixas lá
embaixo, nosso registro das rodadas que tivemos, talvez queira mudar alguma coisa lá e quando o jogo terminar talvez você queira
reduzir um pouco o tamanho da imagem, mas como essa é super grande
e realmente tem uma grande desvantagem, porque como essa página não é rolável,
não consigo acessar o novo botão do jogo, então
é uma quebra-jogo real, está realmente
quebrando nosso jogo, essa distância aqui também é um pouco grande demais entre a imagem
e o texto.
Há muito trabalho a fazer apenas porque estamos em um dispositivo menor,
isso nem mesmo respeita o fato de que nossos usuários podem girar o dispositivo que, a propósito, no momento está
desativado de qualquer maneira e, então, voltarei a isso e como habilitá-lo em um segundo.
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
de maneira mais dinâmica e garantir que nosso aplicativo tenha uma boa aparência em todos os tipos de dispositivos.