@media работает в Chrome и Safari, но не работает в Firefox и IE - PullRequest
Новая
       9

@media работает в Chrome и Safari, но не работает в Firefox и IE

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

Я использую Bootstrap 4, но мне нужен более специфический стиль для мобильных устройств, поэтому я создал @media, и он не работает в Firefox.
Почему? 

@media only screen and
       (max-width:768px) and
       (-webkit-min-device-pixel-ratio:0) and
       (orientation : portrait) {
}

Он расположен в mobile.css.

1 Ответ

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

Рискну предположить, что это потому, что вы используете -webkit-min-device-pixel-ratio:0 в своем правиле @media - Chrome и Safari оба являются браузерами на основе Webkit, а Firefox и Edge - нет, поэтому они будут ошибаться из-за осторожности и просто не применять правило.

Если честно, я бы полностью удалил этот тест из вашего медиазапроса, MDN советует не использовать его (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio), а для Firefox не существует эквивалента (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-device-pixel-ratio)

).
...