Entonces, tengo este sitio web: https://projeto-jogo-memoria.vercel.app/

Le pedí a algunos amigos que lo probaran y uno de ellos tiene un iPhone XR. Según Internet, el ancho de pantalla del iPhone XR es de 414 píxeles.

Si lo abro en las herramientas de desarrollo, funciona bien: https://i.imgur.com/NWBND0c.png

Pero así es como aparece en el teléfono: https://i.imgur.com/YVZU2gw.jpg

Noté que el margen entre los círculos es mucho más grande, pero no sé por qué sucede esto. ¿Podrían ayudarme?

EDITAR ------ Me di cuenta cuando el juego está completo cada (cuando se voltea cada cara) el margen funciona bien. En mi código, cada botón tiene una etiqueta de anclaje como esta:

 <a id="card_${j}" class="card-round-container${(vals.includes(j) ? '' : ' ms-2' )} d-inline-block" onclick="proximoRound('#card_${j}')"> <div class="card-round-back card-round-${tamanho_tabuleiro}x" onclick=""> <i style="font-weight: bold;" class="d-none card-round-${tamanho_tabuleiro}x-icon fa-responsive-size-${tamanho_tabuleiro}x">${tabuleiro[j]}</i> </div> </a>

Cuando se voltean dos tarjetas con el mismo ícono, configuro las propiedades type="" y onclick="" en el ancla y parece funcionar bien. ¿Quizás el error proviene del tipo = "botón" en el ancla? EDITAR -------

EDITAR²:

Este código es un ejemplo del contenedor, una fila y una tarjeta.

 <div class="container"> <div id="tabuleiro" class="row mb-3 mb-sm-4 mb-xl-3 mb-xll-5"> <div class="mb-2 text-center col-12"> <a id="card_0" class="card-round-container d-inline-block" type="button" onclick="proximoRound('#card_0')"> <div class="card-round-back card-round-4x" onclick> <i style="font-weight: bold;" class="d-none card-round-4x-icon fa-responsive-size-4x">2</i> </div> </a> </div> </div> </div>

SOLUCIÓN: eliminé type="button" de la etiqueta de anclaje y parece que se eliminó el margen/relleno innecesario. Esto parece ser algún tipo de problema solo con el navegador Safari. ¿Alguien sabe por qué sucedió?