css media работает в режиме разработчика настольного браузера, но не на реальном iphone 6s - PullRequest
Новая
       6

css media работает в режиме разработчика настольного браузера, но не на реальном iphone 6s

0 голосов
/ 21 октября 2019

Следующий медиазапрос работает в браузерах настольных компьютеров в режиме разработчика, но не работает в мобильных браузерах на реальных iphone 6S. 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

div.woof_sid_auto_shortcode .woof_container {
    background-color: fuchsia !important;
}
}

URL-адрес: https://susustudio.info/load/shop888/ это WordPress У меня есть этов заголовке.

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

Есть идеи, почему это не работает?

Комментарий DubVader является решением. У меня нет галочки рядом с ним, чтобы переключаться как принято. Я изменил свой запрос, как показано ниже: 

@media only screen and (max-device-width: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

div.woof_sid_auto_shortcode .woof_container {
    background-color: fuchsia !important;
}
}

1 Ответ

1 голос
/ 21 октября 2019

Использование (max-device-width: 667px), а не высота. 

@media only screen and (max-device-width: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

div.woof_sid_auto_shortcode .woof_container {
    background-color: fuchsia !important;
}
}
...