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

[Anonymous]

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

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

Tic Tac Toe

@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-weight: bold;
width: 33.33%;
height: 100%;
}

/* Vertical lines */
/* Vertical lines */
.square[id="0"]::after,
.square[id="1"]::after {
border: 4px solid #000;
border-radius: 4px 4px 0px 0px;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -2px;
z-index: 2;
}

.square[id="6"]::after,
.square[id="7"]::after {
border: 4px solid #000;
border-radius: 0px 0px 4px 4px;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -2px;
z-index: 2;
}

.square[id="3"]::after,
.square[id="4"]::after {
border: 4px solid #000;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -2px;
z-index: 2;
}

/* css from tailwind */
.full-viewport {
height: 100vh;
width: 100vw;
}

.size-full {
width: 100%;
height: 100%;
}

.self-center {
align-self: center;
}

.relative {
position: relative;
}

.grid {
display: grid;
}

.grid-rows-12 {
grid-template-rows: repeat(12, minmax(0, 1fr));
}

.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}

.row-start-5 {
grid-row-start: 5;
}

.row-end-9 {
grid-row-end: 9;
}

.col-start-2 {
grid-column-start: 2;
}

.col-end-12 {
grid-column-end: 12;
}

@media (min-width: 768px) {
.md-col-start-5 {
grid-column-start: 5;
}

.md-col-start-5 {
grid-column-end: 9;
}

.md-text-9xl {
font-size: 8rem;
line-height: 1;
}

}

.text-7xl {
font-size: 4.5rem;
line-height:  1;
}

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

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