Почему этот медиа-запрос не ударил сетчатки?
-
02-01-2020 - |
Вопрос
Я борюсь с помощью медиа-запроса, пытаясь нацеленным на экраны сетчатки. Я получил этот медиа-запрос;
@media(-webkit-min-device-pixel-ration:2)and (min-resolution:192dpi) {}
.
в Chrome Canary devtools он получает стиль, но тестирование его на фактическом дисплее сетчатки (iPhone 5s в этом случае) не.
Я также использую эту просмотр этой точки зрения, чтобы все масштабировалось, я пытался его удалить, но не имеет никакого значения в моей проблеме выше.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5 maximum-scale=0.5, user-scalable=no target-densitydpi=device-dpi">
.
Любые идеи по тому, почему у меня есть этот вопрос?
Решение
Попробуйте этот медиа запрос, он работает
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx){
//your css goes here..
}
.
также изменить просмотр в области просмотра
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
. Не связан с StackOverflow