Android 테두리 반경이 매끄 럽습니까?

Question

안드로이드 브라우저의 경계 반경을 개선하기위한 해결 방법이 있습니까?

나는이 논쟁에 관한 더 많은 질문을 찾거나 "지금은 불가능합니다"라는 대답 만 검색하여 공유하고 싶은 간단한 해결책을 생각해 냈습니다.

Answer 1

안드로이드 브라우저에서 테두리 반경 모양을 부드럽게 만들기 위해 약간의 트릭이 필요 했으므로이 간단하면서도 효과적인 솔루션을 생각해냅니다. 난 그냥 내 CSS 클래스에 아래 그림과 같이 박스 그림자를 추가 :

-webkit-box-shadow: 0 0 1px #000; 

x 및 그림자의 y 위치가 너무 그림자가 중심 0이며, 모든 꼬마 필요는 1 x 1 픽셀 크기를 확대 흐림 값을 조정하는 것입니다 (필요에 따라) 모서리 가장자리보다 더 매끄럽게 보이게합니다. 물론 그림자 색상은 둥근 요소의 배경색/테두리 색상과 같아야합니다.

CSS에 다음 코드 줄을 추가하면 작은 문제가 있습니다. 예 ... 모든 -webkit 브라우저를 대상으로합니다. 테두리 반경 모양 (약간) 덜 선명.

작은 타협을 사용할 수있는 디자이너의 유형이라면이 기능을 사용할 수 있습니다.하지만 내가 좋아하는 것처럼 괴롭히는 괴물이라면 CSS를 타겟팅 할 수있는 방법을 찾아야합니다. 특정 장치.

나는 지금이 완벽한 솔루션을 생각하지 못했지만, 최대 범위 속성을 사용하는 규칙을 제한하는 미디어 쿼리를 잘 활용할 수 있습니다 (범위를 제한하기 위해

@media only screen and (-webkit-device-pixel-ratio:.75){ 
/*for low density (ldpi) Android layouts */ 
} 

@media only screen and (-webkit-device-pixel-ratio:1){ 
/*for low density (ldpi) Android layouts */ 
} 

@media only screen and (-webkit-device-pixel-ratio:1.5){ 
/*for low density (ldpi) Android layouts */ 
} 

베스트 대해서는 양호한 설계 적어도 웹킷 데스크톱 브라우저 방지 그들의 화면 폭에 기초한 디바이스) 혹은 '-webkit 기기 화소 비율'그들의 픽셀 밀도에 기초하여 다른 로이드 대상 장치의 모두에게. 희망을 나는 필사적 인 안드로이드 국경 반경에 매료 된 디자이너를 도왔 으면 좋겠다.)