문제점

Google Nexus 7에서 일부 이미지 해상도가 떨어지며,  이미지 주변으로 1px 정도의 실선이 보이는 문제를 발견했다. 미디어 쿼리로 고해상도 이미지를 분기 처리 하였지만 제대로 동작하지 않았다.
이 문제는  Android 4.4.2를 설치한 Google Nexus 7 2012 모델에서만 발생하고, 2013 모델에서는 발생하지 않았다.
별점테두리
 

원인과 해결책

1. 미디어 쿼리> Ratio 분기

고 해상도 이미지 대응용 미디어 쿼리에서 Ratio 최소 1.5부터 분기하는데, Nexus7의 2012 모델의 경우 Ratio가 1.3어서 분기 기준을 넘어서지 않았다.  [1. 기기별 Ratio 정보는 http://bjango.com/articles/min-device-pixel-ratio/ 를 참고]
Nexus7의 2012모델 사용자가 많거나 고해상도 이미지를 미디어 쿼리로 분기처리 한다면 pixel-ratio를 1.3으로 설정해야 한다.

@media screen and (-webkit-min-device-pixel-ratio:1.3){ ... }

2. 이미지 없거나 로딩 늦을 경우에 대한 대체 색상 정보 있는 경우

아래 코드에서 #ccc와 같은 배경색을 설정했다면 이미지 상하로 실선이 보인다.

{background:#ccc url(icon.gif)}

이 문제는 1번처럼 미디어 쿼리의 분기 기준을 Ratio 1.3으로만 변경해도 해결할 수 있다. 만약 미디어 쿼리로 분기하지 않고 고해상도 대응을 하고 있다면 아래와 같이 배경색을 제거한다.

{background:url(icon.gif)}
카테고리: BugReport

0개의 댓글

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다