Android 용 Chrome에서 미디어 쿼리가 작동하지 않습니다.

dpi가 200 이상인 태블릿에 대한 미디어 쿼리를 작성했습니다. 작동해야하는 태블릿은 Samsung Galaxy Tab S 10.5입니다. iPad의 망막과 Samsung Tab S에 도달하기 위해 1 개의 미디어 쿼리를 사용하려고하지만 불행히도 내가 시도한 방식이 아닙니다.Android 용 Chrome에서 미디어 쿼리가 작동하지 않습니다.

@media screen (device-pixel-ratio: 2) and (-webkit-device-pixel-ratio: 2) { 
    body {font-size: 20px; } 
    .padding-n { padding: 10px; } 
    .button{ color: red; } 

    /*table alternate row color for iPad*/ 
    .white-table > table tr:nth-child(2n) { background: #edf4f7;} 
}

이 검색어는 표준 Android 브라우저에서 작동하지만 Android 용 Chrome에서는 작동하지 않습니다. iPad에서도 잘 작동합니다.

누구나이 문제에 대한 해결책이 있습니까?

@media (device-pixel-ratio: 2), (-webkit-device-pixel-ratio: 2) { 
    ... 
}

또는

@media screen and (device-pixel-ratio: 2), screen and (-webkit-device-pixel-ratio: 2) { 
    ... 
}

내가 당신의 예제와 문제의 사용이다 생각 :

출처

2014-09-16 Sanne van Tongelen

잘 모르겠지만 다음과 같이 시도해 볼 수 있습니다. @media 화면 및 (최소 장치 - 픽셀 비율 : 2) 및 (-webkit-min-device-pixel-ratio : 2) {...} min을 사용하지 않으려면 정확히 2가되어야합니다. U는 화면 뒤에 "and"를 사용해야합니다. – Tim

불행히도 이것은 작동하지 않습니다 .. 미디어 쿼리는 iPad 에서뿐만 아니라 기본 Android 브라우저에서도 잘 작동하지만 FF와 Chrome에서는 제대로 작동하지 않습니다. –

나는 그래서 당신이 될 것이다 이런 식으로

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */ 
}

일을 본 적이 AND 즉, (device-pixel-ratio: 2)과 (-webkit-device-pixel-ratio: 2)이 모두 참이어야합니다. 쉼표를 사용하면 OR으로 바뀝니다.

출처

2014-09-16 17:51:10

많은 감사, 이것은 작동합니다. :) –

Android 용 Chrome에서 미디어 쿼리가 작동하지 않습니다.

답변

관련 문제