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

avatar
Glenis Tivari
8 августа 2021 в 16:44
44
1
1

Недавно я работал над страницей, основанной на знаниях Ведьмака, просто чтобы узнать некоторые концепции веб-разработки и дизайна, так как у меня было несколько крутых идей, и я решил попробовать и поработать над этим. Я работал над медиа-запросами для отзывчивости на главной странице, но не могу настроить отображение на экранах, подобных 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;
}
}

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

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

Источник
wazz
8 августа 2021 в 19:07
0

Это может быть натянуто, но попробуйте переупорядочить ваши медиа-запросы от самого узкого к самому широкому, переходя вниз по странице css.

Glenis Tivari
10 августа 2021 в 07:32
0

@wazz Я попробовал это, но это не решило мою проблему, у меня все те же проблемы

Ответы (1)

avatar
veesar
10 сентября 2021 в 16:18
1

В адаптивном дизайне существует разница между разрешением экрана устройства и размером области просмотра. Разрешение экрана мобильного устройства может быть 1920x1080, но размер области просмотра (или коэффициент CSS) может быть 736x414px. Это зависит от устройства. Подробнее о размерах области просмотра здесь и здесь.
При написании медиазапросов в CSS для адаптивного дизайна следует использовать размеры области просмотра. В вашем случае размер окна просмотра Note20 Ultra составляет 412x883px. Таким образом, ваш медиазапрос max-width должен быть для 883px или ближайшего "общего" разрешения 1024px. Вы также можете протестировать свой сайт в браузере, используя эти размеры.

Еще несколько замечаний:

  • В вашем коде точками останова являются width и height вместо max-width или max-height. Так что они, вероятно, не срабатывают на вашем мобильном телефоне (навигация телефона уменьшит высоту экрана). Это может работать в вашем браузере, потому что вы использовали точный пиксель в DevTools
  • .
  • В адаптивной разработке вам, вероятно, не понадобится использовать и высоту, и ширину. Как правило, вы будете использовать только max-width с обычными размерами экрана в качестве контрольных точек.
Glenis Tivari
13 сентября 2021 в 09:40
0

Благодарю за ваш ответ! И да, фиксированная ширина и высота просто от отчаяния, лол, в следующий раз попробую последовать твоему совету.