Samsung Galaxy S9 не регистрирует CSS-ориентацию медиа-запроса - PullRequest
Новая
       50

Samsung Galaxy S9 не регистрирует CSS-ориентацию медиа-запроса

0 голосов
/ 27 сентября 2019

Я нахожусь на завершающей стадии разработки веб-сайта для местного парикмахера, и застрял в одной маленькой проблеме, касающейся CSS медиа-запросов.До сих пор все шло гладко при настройке медиазапросов (ну, ровно так, как медийные запросы могут идти ...), но я застрял на одной маленькой проблеме - мой личный телефон (Samsung Galaxy S9) не регистрирует медиазапрос, когдаЯ наклоняю свой телефон в ландшафтный режим.

Причина, по которой он меня сбивает, заключается в том, что режим устройств Chrome Dev Tools (кстати, удивительно ) делает Поднимите медиазапрос, когда я переключаю вид устройства в альбомную, но когда я пытаюсь сделать это на моем реальном телефоне, он не регистрируется!Странно, правда?Я вставлю нижеприведенный код, а также ссылку на веб-сайт, если кто-то еще захочет просмотреть его с помощью Chrome Dev Tools или на своем мобильном устройстве.Это ссылка на сайт: Парикмахерская Билла

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

@media only screen and (max-device-width : 450px) {

    #about-body {
        flex-direction: column;
    }

    #about-para {
        width: 100%;
    }

    #about-para p {
        font-size: 1.2em;
        margin: 5%;
    }

    #about-img {
        width: 100%;
    }

    /*------------*/

    #about-store-body {
        flex-direction: column;
    }

    #about-store-intro {
        width: 100%;
    }

    #about-store-intro p {
        font-size: 1em;
        margin: 5%;
    }

    #about-store-img {
        width: 100%;
    }


}

@media only screen and (max-device-width : 450px) and (orientation : landscape) {

    #about-body {
        flex-direction: column;
    }

    #about-para {
        width: 100%;
    }

    #about-para p {
        font-size: 1.2em;
        margin: 5%;
    }

    #about-img {
        width: 100%;
    }

    /*------------*/

    #about-store-body {
        flex-direction: column;
    }

    #about-store-intro {
        width: 100%;
    }

    #about-store-intro p {
        font-size: 1em;
        margin: 5%;
    }

    #about-store-img {
        width: 100%;
    }


}

Ниже приведен фрагмент, скопированный и вставленный из Chrome DevИнструменты, вы можете видеть, что когда я переключил вид в альбомную ориентацию, Chrome Dev Tools зарегистрировал, что ориентация была переключена в альбомную ориентацию, и изменил flex-direction на column.Однако по какой-то причине на моем Galaxy S9 он не регистрируется и не меняет flex-direction при повороте на альбомную ориентацию.( В реальных инструментах Chrome Dev Tools второй медиа-запрос без альбомной ориентации фактически вычеркнут - это значит, что он был переопределен ландшафтным запросом, извините, мне было трудно опубликовать изображение, мой компьютер должен был работать) 

@media only screen and (max-device-width: 780px) and (min-device-width: 451px) and (orientation: landscape)
<style>
#about-body {
    flex-direction: column;
}

@media only screen and (max-device-width: 780px) and (min-device-width: 451px)
<style>
#about-body {
    flex-direction: column;
}

Кто-нибудь еще сталкивался с этой проблемой с их Galaxy S9 раньше?Пожалуйста, дайте мне знать, если у вас есть какие-либо решения, спасибо!

Редактировать:

Я тестирую веб-сайт на телефонах коллег и он работает правильно на их, просто кажется, что это не такработать на моей Galaxy S9.Я не уверен, что это только мой телефон или все Samsung Galaxy S9.Если у кого-то, кто просматривает этот пост, есть Галактика, дайте мне знать, если он работает!Ссылка на мой сайт в разработке находится выше в верхней части этой страницы.Спасибо!

...