Comencemos de manera simple con el tamaño
del dispositivo que estamos ejecutando. En este momento tengo emuladores relativamente grandes aquí y ahora cambiaré esto y
lo cambiaré en
Android, pero por supuesto podríamos hacer lo mismo en iOS. Aquí en Android y crearé un nuevo dispositivo virtual
que en realidad es mucho más
pequeño y para eso en mi lista de imágenes aquí al crear un nuevo dispositivo virtual, elegiré uno
súper
pequeño como este 3. Teléfono de 7 pulgadas aquí.
Ahora, una nota al margen importante, podría estar pensando que ya no muchos usuarios usan dispositivos tan pequeños,
pero eso realmente depende del mercado al que se dirige.
Si se dirige principalmente a los EE. UU., Bueno, tal vez realmente no necesite optimizar su aplicación para dispositivos
pequeños, pero si se
dirige a todo el mundo o tal vez a algunos países emergentes, bueno, eso parece diferente, por lo
que definitivamente desea para saber cuál es su objetivo y qué dispositivos usan sus usuarios objetivo.
Así que crearé este dispositivo aquí, uno relativamente pequeño, simplemente haga clic en siguiente aquí, elija el pastel de Android en mi
caso aquí como la versión de Android y luego termine
esto y ahora esto creará este dispositivo virtual y ahora también lo lanzaré.
Así que ahora esto se está iniciando, en mi segunda pantalla lo traeré de vuelta
aquí en un segundo, cerraré este
dispositivo Android por el momento, este más grande y aquí está el más pequeño.
Permítanme también aumentar esto un poco y esto solo aumenta el tamaño en el que
podemos verlo, no la dimensión del teléfono
y, como ya pueden ver, este es definitivamente un dispositivo más pequeño con menos píxeles disponibles tanto
en el altura y ancho.
Así que ahora con eso, ya estoy de vuelta en mi proyecto, este es
el proyecto en el que trabajamos en las últimas secciones y lo encuentra
adjunto en caso de que no lo haya seguido aquí y ya haya comenzado mi
servidor de exposición con npm start y pulsando a, ahora instalo expo y luego esta aplicación aquí en este emulador.
Así que esperemos a que termine y se inicie, y aquí está mi aplicación y ya podemos decir que
nuestra aplicación ciertamente no está optimizada para pantallas más
pequeñas, aquí los botones no están realmente posicionados tan bien, así que hay algo
mal allí y ahora veamos cómo funciona cuando comenzamos el juego
Bueno, aquí parece que esto funciona, si hago clic en Iniciar juego, bueno, eso ciertamente funciona aquí, pero tenemos un problema en nuestra pantalla de inicio y tal vez aquí, también queremos
cambiar algunos tamaños, tal vez queremos eliminar el margen o reducir el margen que tenemos
entre este número y este cuadro con nuestras entradas aquí, tal vez queramos aumentar el ancho de nuestros cuadros allí,
nuestro registro de las rondas que teníamos, así que tal vez queremos cambiar algo allí y cuando el juego esté terminado, tal vez
queremos reducir un poco el tamaño de la imagen, pero debido a que es
súper grande y en realidad tiene una gran desventaja porque, dado que esta página
no es desplazable, no puedo acceder al nuevo botón del
juego, así que es un juego de
verdad, realmente está rompiendo nuestro juego, esta distancia aquí también es demasiado grande entre la imagen
y el texto.
Hay un montón de trabajo por hacer solo porque estamos en un dispositivo
más pequeño, esto ni siquiera respeta el hecho de que nuestros usuarios podrían rotar el dispositivo, que por el momento
está desactivado de todos modos, así que volveré a esto y cómo habilitarlo en un segundo.
Entonces, comencemos a trabajar en eso y aprendamos cómo podemos calcular realmente nuestro espacio que estamos distribuyendo, los tamaños que usamos de
una manera más dinámica y asegurarnos de que nuestra aplicación se vea bien en todo tipo de dispositivos.