Медиа-запрос работает в окне браузера с измененным размером, но не на мобильном устройстве. - PullRequest
Новая
       10

Медиа-запрос работает в окне браузера с измененным размером, но не на мобильном устройстве.

0 голосов
/ 25 мая 2018

У меня есть сайт WordPress, где я добавляю несколько запросов emdia для обработки мобильной версии сайта.Я использую Firefox для просмотра сайта.Firefox имеет функцию для разработчиков, где вы можете изменить размер браузера (к сожалению, я не знаю, как он называется по-английски), и я использовал эту функцию, чтобы посмотреть, как мои медиа-запросы влияют на сайт.

Это мой код: 

@media screen and (max-width: 515px) {

.footer-contact {
    background-color: red;
}

.container {
    padding-left: 5px;
    padding-right: 5px;
}
footer {
    margin-top: 150px;
}
#hem-kontakt {
    width: 220px;
    margin-left: auto;
    margin-right: auto;
}
#hem-nummer {
    width: 240px;
    margin-left: auto;
    margin-right: auto;
}
#hem-kontor {
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}
#footer-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.footer-contact {
    padding: 0 !important;
}
.post-container #displayTable {
    left: 0;
    display: block;
    width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: -230px;
}

}

Если я смотрю на веб-сайт в окне браузера с измененным размером, все выглядит хорошо.Но когда я смотрю на веб-сайт на моем телефоне, кажется, что он игнорирует некоторые CSS в моих медиа-запросах.

Это то, что я сделал до сих пор:

  • Я разместил свои медиа-запросы внизу файла css

  • Я посмотрел на мета-теги в файле header.php, и они выглядят так: 

    </p>

<pre><code><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</code>

  • Я опустошил кеш в браузере телефона
  • Я пробовал три разных телефона (все с android)
  • Я добавил background-color: red; на запрос, чтобы узнать, получу ли я реакцию.Я получил только реакцию в браузере.

ВАЖНО

Этот код является наиболее важным: 

.footer-contact {
    padding: 0 !important;
}
.post-container #displayTable {
    left: 0;
    display: block;
    width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: -230px;
}

В.post-container #displayTable мобильное устройство распознает left: 0 и margin-bottom: -230px, но игнорирует поля left и margin-right.

В контакте .footer игнорирует заполнение: 0;

Я знаю, что мобильное устройство размещается в max-width: 515px, потому что оно отображает # footer-container как flex (этот код) 

#footer-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
...