1 00:00:02,240 --> 00:00:05,740 Comencemos de manera simple con el tamaño 2 00:00:05,750 --> 00:00:12,140 del dispositivo que estamos ejecutando. En este momento tengo emuladores relativamente grandes aquí y ahora cambiaré esto y 3 00:00:12,140 --> 00:00:13,090 lo cambiaré en 4 00:00:13,100 --> 00:00:18,620 Android, pero por supuesto podríamos hacer lo mismo en iOS. Aquí en Android y crearé un nuevo dispositivo virtual 5 00:00:18,620 --> 00:00:20,690 que en realidad es mucho más 6 00:00:20,690 --> 00:00:26,570 pequeño y para eso en mi lista de imágenes aquí al crear un nuevo dispositivo virtual, elegiré uno 7 00:00:26,660 --> 00:00:27,410 súper 8 00:00:27,410 --> 00:00:30,040 pequeño como este 3. Teléfono de 7 pulgadas aquí. 9 00:00:30,050 --> 00:00:36,290 Ahora, una nota al margen importante, podría estar pensando que ya no muchos usuarios usan dispositivos tan pequeños, 10 00:00:36,470 --> 00:00:39,980 pero eso realmente depende del mercado al que se dirige. 11 00:00:39,980 --> 00:00:45,980 Si se dirige principalmente a los EE. UU., Bueno, tal vez realmente no necesite optimizar su aplicación para dispositivos 12 00:00:45,980 --> 00:00:47,360 pequeños, pero si se 13 00:00:47,360 --> 00:00:52,910 dirige a todo el mundo o tal vez a algunos países emergentes, bueno, eso parece diferente, por lo 14 00:00:52,910 --> 00:00:58,340 que definitivamente desea para saber cuál es su objetivo y qué dispositivos usan sus usuarios objetivo. 15 00:00:59,150 --> 00:01:06,170 Así que crearé este dispositivo aquí, uno relativamente pequeño, simplemente haga clic en siguiente aquí, elija el pastel de Android en mi 16 00:01:06,170 --> 00:01:09,640 caso aquí como la versión de Android y luego termine 17 00:01:09,770 --> 00:01:14,190 esto y ahora esto creará este dispositivo virtual y ahora también lo lanzaré. 18 00:01:14,240 --> 00:01:19,740 Así que ahora esto se está iniciando, en mi segunda pantalla lo traeré de vuelta 19 00:01:19,770 --> 00:01:22,110 aquí en un segundo, cerraré este 20 00:01:22,110 --> 00:01:27,330 dispositivo Android por el momento, este más grande y aquí está el más pequeño. 21 00:01:27,430 --> 00:01:33,550 Permítanme también aumentar esto un poco y esto solo aumenta el tamaño en el que 22 00:01:33,580 --> 00:01:36,300 podemos verlo, no la dimensión del teléfono 23 00:01:36,420 --> 00:01:43,010 y, como ya pueden ver, este es definitivamente un dispositivo más pequeño con menos píxeles disponibles tanto 24 00:01:43,010 --> 00:01:45,640 en el altura y ancho. 25 00:01:45,660 --> 00:01:50,360 Así que ahora con eso, ya estoy de vuelta en mi proyecto, este es 26 00:01:50,380 --> 00:01:54,900 el proyecto en el que trabajamos en las últimas secciones y lo encuentra 27 00:01:54,900 --> 00:01:59,730 adjunto en caso de que no lo haya seguido aquí y ya haya comenzado mi 28 00:01:59,730 --> 00:02:06,410 servidor de exposición con npm start y pulsando a, ahora instalo expo y luego esta aplicación aquí en este emulador. 29 00:02:06,510 --> 00:02:13,460 Así que esperemos a que termine y se inicie, y aquí está mi aplicación y ya podemos decir que 30 00:02:13,550 --> 00:02:17,200 nuestra aplicación ciertamente no está optimizada para pantallas más 31 00:02:17,210 --> 00:02:22,060 pequeñas, aquí los botones no están realmente posicionados tan bien, así que hay algo 32 00:02:22,060 --> 00:02:26,090 mal allí y ahora veamos cómo funciona cuando comenzamos el juego 33 00:02:26,090 --> 00:02:37,490 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 34 00:02:37,550 --> 00:02:42,670 cambiar algunos tamaños, tal vez queremos eliminar el margen o reducir el margen que tenemos 35 00:02:42,670 --> 00:02:49,730 entre este número y este cuadro con nuestras entradas aquí, tal vez queramos aumentar el ancho de nuestros cuadros allí, 36 00:02:50,330 --> 00:02:58,490 nuestro registro de las rondas que teníamos, así que tal vez queremos cambiar algo allí y cuando el juego esté terminado, tal vez 37 00:02:58,490 --> 00:03:03,590 queremos reducir un poco el tamaño de la imagen, pero debido a que es 38 00:03:03,590 --> 00:03:08,570 súper grande y en realidad tiene una gran desventaja porque, dado que esta página 39 00:03:08,810 --> 00:03:12,320 no es desplazable, no puedo acceder al nuevo botón del 40 00:03:12,470 --> 00:03:14,950 juego, así que es un juego de 41 00:03:15,140 --> 00:03:20,740 verdad, realmente está rompiendo nuestro juego, esta distancia aquí también es demasiado grande entre la imagen 42 00:03:20,780 --> 00:03:22,280 y el texto. 43 00:03:22,280 --> 00:03:26,000 Hay un montón de trabajo por hacer solo porque estamos en un dispositivo 44 00:03:26,000 --> 00:03:31,610 más pequeño, esto ni siquiera respeta el hecho de que nuestros usuarios podrían rotar el dispositivo, que por el momento 45 00:03:31,640 --> 00:03:36,150 está desactivado de todos modos, así que volveré a esto y cómo habilitarlo en un segundo. 46 00:03:36,170 --> 00:03:43,010 Entonces, comencemos a trabajar en eso y aprendamos cómo podemos calcular realmente nuestro espacio que estamos distribuyendo, los tamaños que usamos de 47 00:03:43,010 --> 00:03:49,160 una manera más dinámica y asegurarnos de que nuestra aplicación se vea bien en todo tipo de dispositivos.