2011-04-01 3 views
1

CSS와 두 가지 이미지 인스턴스를 사용하여 두 가지 다른 모바일 장치에서보고 싶은 결과를 얻을 수 있습니다. 320의 화면 너비를 사용하는 기기의 경우 이미지를 image1.png로 구현합니다. iPhone4 (Retina Display)와 같은 최신 장치의 경우 이미지를 [email protected]로 구현합니다. 이 새로운 AMOLED/슈퍼 AMOLED 폰은 매우 가난이 2 배 이미지를 렌더링됩니다 normal.css 스타일 시트뿐만 아니라모든 모바일 장치에서 모바일 웹 이미지가 올바르게 렌더링되도록하기 위해 취하는 방법은 무엇입니까?

<link href="theme/hirez.css" rel="stylesheet" type="text/css" 
    media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" /> 

그러나 사용에 의해 호출되는 hirez.css 스타일 시트를 필요로; 모든 2x 이미지가 픽셀 화 된 것처럼 보입니다.

내가 뭘 잘못하고 있는지 알아 내려고하고 있습니다 ... 각 파일 이름에 대해 2 세트의 이미지가 있고 정확한 CSS 시트를 호출합니다 ... 어떤 도움을 주시면 크게 감사하겠습니다.

답변

0

고해상도 이미지를 사용하여 페이지의 높이와 너비의 50 %로 표시하면됩니다.

+0

hirez.css에서 @ 2x.png 이미지의 배경 크기가 50 % 인 상대 이미지를 표시합니다. 예를 들어 normal.css는 50px 너비와 50px 높이, hirez.css는 같은,하지만 50px와 50px의 배경 크기에 머물도록 @ 2x.png 이미지를 말하고 ... 나는 슈퍼 amoled 디스플레이가 웹 사이트를 입력 할 때 hirez.css을 잡을 수없는 것 같아요. – Mike

+0

이 가능합니다. 어쩌면 픽셀 비율은 해당 장치에서 1.5가 아닙니다. 1.1이나 다른 것을 시도해도 될까요? 너는 결코 알지 못한다 :) – cmplieger