Медиа-запросы работают в инспекторе, а не на телефоне - PullRequest
Новая
       46

Медиа-запросы работают в инспекторе, а не на телефоне

0 голосов
/ 05 апреля 2020

У меня есть базовое приложение c (REACT / SASS), которое использует API для отображения данных о стране. Медиа-запросы работают локально и развертываются при использовании chrome инспектора, но когда я пытаюсь просмотреть его на своем телефоне, ни один из медиа-запросов не работает, что может вызвать это?

Ниже приведен индекс. html head 

    <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

Ниже приведен пример соответствующего s css

.country-info-ctr {
  display: flex;
  flex-direction: column;
  height: 100%
}

.info-wrapper {
  display: flex;
  flex-direction: row;
  margin: 20px;
  align-items: center;
  // justify-content: space-evenly;
}

.info-ctr {
  display: flex;
  flex-direction: column;
  margin-left: 40px;

}

.country-info-flag {
  height: 500px !important;
  width: 750px !important;
  object-fit: cover;
}

.country-info-name {
  margin-bottom: 20px;
  font-weight: 900;
}

.data-wrapper {
  display: flex;
  align-items: space-around;

}

.data-ctr {
  display: flex;
  flex-direction: column;
  flex: 1;

}

.border-button {
  height: 40px;
  background-color: rgb(218, 218, 218);
  margin: 9px;
  padding: 7px;
}

.border {
  text-decoration: none;
  font-size: 16px;
}

.border-ctr {
  display: flex;
  align-items: center;
}

.home-bttn {
  height: 30px;
  width: 90px;
  margin: 30px 30px 0 30px;
  font-size: 20px;

}

@media (max-device-width: 400px) {

  .country-info-flag {
    height: 240px !important;
    width: 320px !important;
  }

  .info-wrapper {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .info-ctr {
    margin: 20px;
  }

  .data-wrapper {
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }

  .border-ctr {
    display: flex;
    flex-direction: column;
    object-fit: contain;
    position: relative;
    margin-top: 10px;
    margin-bottom: 100px;
  }

  .border-button a {
    height: 10px;
    width: 10px;
    margin: 1px;
    padding: 1px;

  }

  .border {
    font-size: 12px;
  }

}

Что я делаю не так?

1 Ответ

0 голосов
/ 06 апреля 2020

Мне кажется, что между симулятором chrome и реальным устройством есть 2 возможных различия.

Во-первых, мобильное устройство может игнорировать дубликаты мета-тегов viewport. Для этого вопроса , хотя один и тот же атрибут name на нескольких тегах meta действителен HTML, некоторые браузеры / парсеры могут обрабатывать их некорректно. В этом случае возможно, что на вашем мобильном устройстве используется только второй тег viewport, поэтому <meta name="viewport" content="width=device-width"> полностью игнорируется.

Вы можете попробовать объединить все в один тег meta, например: Итак:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Вторая разность потенциалов между симулятором chrome и браузером на реальном устройстве заключается в том, что max-device-width медиазапросы могут не поддерживаться. Согласно документам MDN они устарели. Вы должны попробовать использовать @media (max-width: 400px)

...