왜이 미디어 쿼리가 망막을 쳤지 않습니까?
-
02-01-2020 - |
문제
Retina 화면을 타겟팅하려는 미디어 쿼리로 고생하고 있습니다. 이 미디어 쿼리가 있습니다.
@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