해상도가

Question

인 Android 브라우저가 CSS 미디어 쿼리로 중단됩니다. 안드로이드 브라우저가 미디어 쿼리에서 min-resolution을 지원하지 않습니다 (사용시 중단됩니다). 나는 안드로이드 용으로 사용할 것을 제안하는 많은 사이트를 읽었으며, 그래서 나는 그것이 왜 내 사이트를 파괴하고 있는지 혼란스러워한다.

이 작동

(물론 내 사이트에 대한 나쁜 안드로이드 크롬에서 작동) :

@media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.5) { ... }

이 크롬을 제외,하지만 너무 휴식 기본 브라우저 : 심지어

@media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.5) and (min-resolution: 144dpi) { ... }

1dpi으로 설정하면 같은 효과가 있습니다.

아이디어가 있으십니까?

Answer 1

다양한 브라우저에 대한 공급 업체 접두사가 있습니다. 여러 사이트에서 다음 예제를 사용해 보았습니다. 여러 개의 검색어를 결합해야 할 경우에 대비하여 min-width을 조건부로 포함했습니다.

@media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), 
    (min-width: 480px) and (-moz-min-device-pixel-ratio: 1.5), 
    (min-width: 480px) and (min-device-pixel-ratio : 1.5) { 
/* ... Styles ... */ 
}