Проблемы с медиа-запросами для определенных мобильных устройств

Question

Недавно я работал над страницей, основанной на знаниях Ведьмака, просто чтобы узнать некоторые концепции веб-разработки и дизайна, так как у меня было несколько крутых идей, и я решил попробовать и поработать над этим. Я работал над медиа-запросами для отзывчивости на главной странице, но не могу настроить отображение на экранах, подобных Samsung Note 20 Ultra. Я протестировал страницу на многих разных устройствах, и на подавляющем большинстве она выглядит нормально, но что бы я ни пробовал, я не могу заставить главный раздел «Главы» находиться в центре экрана для Note 20 Ultra. и некоторые другие устройства аналогичного размера. Я использовал запросы максимальной ширины при изменении размера окна на моем ноутбуке, некоторые обычные интервалы, которые мне предлагали люди, а также точную ширину и высоту для Note 20 Ultra и других устройств, которые отображаются в инструментах разработчика Google Chrome в инспекторе. В devtools экран выглядит идеально для всех размеров, для которых я делал запросы, включая размер дисплея Note20Ultra, но когда я открываю страницу на своем телефоне, она выглядит совсем не так; основной прозрачный элемент div отображается очень высоко на странице, а не по центру, как предполагает окно проверки Chrome.

Это html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Modern Witcher's Journal</title>
<link rel="stylesheet" href="index.css">
</head>
<body>

<script type="text/javascript" src="script.js"></script>




<!--<audio id="source" autoplay loop>
    <source src="C:\Users\user\AngularProjects\The ModernWitcher's Journal\audio\pages\home- 
page-theme.mp3">
</audio>-->



<div class="container">

    <br>
    <h1 class="homepage-title">
        <img src="images/witcher-transparent.png" alt="witcherLogo" 
        class="witcher-transparent-logo">
        The Modern Witcher's Journal
        <img src="images/witcher-transparent.png" alt="witcherLogo" 
        class="witcher-transparent-logo">
    </h1>
    <br>

    <div class="transparent-center-div">

        <br>
        <h2 class="sections-header">Chapters</h2>
        <br>

        <p class="sections-list">
            <button class="sections-list-buttons" id="bestiary" 
onClick="bestiaryClicked()">Bestiary</button>
            <br>
            <button class="sections-list-buttons" id="signs" onClick="signsClicked()">The 
Signs</button>
            <br>
            <button class="sections-list-buttons" id="alchemy" 
onclick="alchemyClicked()">Alchemy</button>
            <br>
            <button class="sections-list-buttons" id="map" onclick="mapClicked()">Map</button>
        </p>
        <br>
        <br>
    </div>
</div>

</body>
</html>

А это запросы CSS с условиями размера, основанными на том, что я нашел в Интернете о размерах дисплеев различных больших мобильных устройств. Последние два используются для Note 20Ultra (нормальный дисплей и перевернутый по горизонтали). У меня были проблемы с некоторыми устройствами, подобные ситуации, в которой я сейчас нахожусь с Note20 (и другими моделями аналогичного размера), но я всегда находил способ их исправить. Я не совсем понимаю, что я делаю неправильно. Спасибо за ваше время.

@media screen and (width: 1080px) and (height: 2340px)
{
.container .transparent-center-div
{
    bottom: 0;
    background: rgba(0, 0, 0, 0.342);
    color: rgb(228, 195, 5);
    border-radius: 1cm;
    margin-left: 3cm;
    margin-right: 3cm;
    margin-top: 60%;
    padding-top: 4cm;
    padding-bottom: 4cm;
    position: relative;
}

.sections-header
{
    font-size: 80px;
}

.sections-list-buttons
{
    font-size: 65px;
}

.homepage-title
{
    margin-top: 1cm;
    font-size: 75px;
}

.homepage-title .witcher-transparent-logo
{
    height: 50px;
    width: 50px;
}
}

@media screen and (width: 2316px) and (height: 1080px)
{
.container .transparent-center-div
{
    bottom: 0;
    background: rgba(0, 0, 0, 0.342);
    color: rgb(228, 195, 5);
    border-radius: 1cm;
    margin-left: 3cm;
    margin-right: 3cm;
    margin-top: 4%;
    padding-top: 4cm;
    padding-bottom: 4cm;
    position: relative;
}

.sections-header
{
    font-size: 50px;
}

.sections-list-buttons
{
    font-size: 35px;
}

.homepage-title
{
    margin-top: 1cm;
    font-size: 75px;
}

.homepage-title .witcher-transparent-logo
{
    height: 50px;
    width: 50px;
}
}

@media screen and (width: 1080px) and (height: 2316px)
{
.container .transparent-center-div
{
    bottom: 0;
    background: rgba(0, 0, 0, 0.342);
    color: rgb(228, 195, 5);
    border-radius: 1cm;
    margin-left: 3cm;
    margin-right: 3cm;
    margin-top: 60%;
    padding-top: 4cm;
    padding-bottom: 4cm;
    position: relative;
}

.sections-header
{
    font-size: 70px;
}

.sections-list-buttons
{
    font-size: 55px;
}

.homepage-title
{
    margin-top: 1cm;
    font-size: 75px;
}

.homepage-title .witcher-transparent-logo
{
    height: 50px;
    width: 50px;
}
}

Просмотр при осмотре:

Просмотр на экране мобильного устройства:

Проблемы с медиа-запросами для определенных мобильных устройств

Ответы (1)