Размер строки HTML-таблицы не изменяется на мобильном устройстве ⇐ CSS

[Anonymous]

У меня есть таблица с несколькими строками и столбцами в Svelte. Его размер можно легко изменить на рабочем столе с помощью инструмента разработчика, но когда я пробую это на своем телефоне и планшете, строки становятся очень высокими.
это код для таблицы

Код: Выделить всё

{#each ['A', 'B', 'C', 'D'] as rowLetter}

{#each [1, 2, 3] as rowSeat}


{/each}

{#each [4, 5, 6] as rowSeat}



{/each}

{#each [7, 8, 9] as rowSeat}



{/each}

{/each}




#seat-table {
width: 100%;
}

.block {
width: 50px;
height: 50px;
}

И это для отдельного места.

Код: Выделить всё

 addOrRemove(seatPosition)}>
{#if seats.includes(seatPosition)}
[img]/icons/selectedCheck.svg[/img]
{:else}
[img]/icons/seatIcon.png[/img]
{/if}




.seat {
display: flex;
justify-content: center;
align-items: center;
width: 100%;

aspect-ratio: 1/1;
border-radius: 0.3rem;
cursor: pointer;

img {
height: 100%;
width: 100%;
object-fit: cover;
}

&:hover {
transform: scale(1.1);
}
}

button {
all: unset;
}

Размер меняется нормально


iPhone 7


iPad Air 5


Сайт доступен по адресу https://seatbox.vercel.app, а полный код — по адресу https://github.com/PatatoBit/seatbox

Подробнее здесь: https://stackoverflow.com/questions/786 ... -on-mobile