Проблема с компоновкой доски «Крестики-нолики» между эмуляцией мобильного браузера в настольном и мобильном браузерах ⇐ CSS

[Anonymous]

Я создал игру «крестики-нолики», используя React и Tailwind CSS. Компоновка платы работает должным образом при просмотре в режиме мобильной эмуляции в браузере моего настольного компьютера, как показано на этом снимке экрана. Однако при доступе через мобильные браузеры (Chrome и Safari на iOS) доска выглядит сломанной, а горизонтальные линии сдвинуты вниз, как показано на этом снимке экрана.
Цель состоит в том, чтобы линии доски (как вертикальные, так и горизонтальные) правильно выровнены по закругленным краям независимо от устройства.
Фрагмент кода:

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

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
font-family: fredoka-medium;
box-sizing: border-box;
}

.board {
display: table;
position: relative;
width: 100%;
height: 100%;
}

.board-row {
display: table-row;
position: relative;
width: 100%;
height: 33%;
}

/* Horizontal lines */
.board-row:not(:last-child)::after {
border: 4px solid #000;
border-radius: 4px 4px 4px 4px;
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
z-index: 2;
}

.square {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
font-family: fredoka-medium;
font-weight: bold;
width: 33.33%;
height: 100%;
}

/* Vertical lines */
.square:not(:last-child)::after {
border: 4px solid #000;
border-radius: 4px 4px 4px 4px;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -2px;
z-index: 2;
}

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

Вопросы:
Почему макет мобильной эмуляции в настольном браузере и реальных мобильных браузерах различается?
Как я могу более эффективно тестировать мобильные браузеры на своем настольном компьютере, чтобы устранить эту проблему?
Вы можете найти полный проект на GitHub для справки: GitHub Репозиторий.
Я добавил в .board позицию: относительный, который располагал горизонтальные линии от нижней части области просмотра до нижней части доски. Я ожидаю, что реальная мобильная страница будет выглядеть как мобильная эмуляция.

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