2012-08-02 4 views
0

좋아, 그래서 Photoshop에서 앱을 만든 디자이너와 함께 작업 해 왔습니다. 저는 iPhone 상태 표시 줄을 사용하지 않고 디자이너가 100px로 만든 맞춤 탐색 바를 사용하고 있습니다. 그 탐색에서 그는 48 픽셀의 아이콘을 넣었습니다.Retina Display 및 구현이 나를 혼란스럽게합니다.

이제 코드로 변환해야하고 목적을 위해 UIWebView를 사용하고 있습니다. 그가 디자인 한 레이아웃은 UIWebView에로드 될 HTML/CSS로 만들 예정입니다.

이제는 화면으로 만든 PSD의 크기가 640 x 960입니다. Iphone4에서는 실제 크기가 아니라 해상도입니다. 640 x 960 픽셀 이미지/PSD 설정에 기초하여 그는 100 픽셀의 최상단을 만들었습니다. 이제 내가 그를 따라 다니면 상황이 엉망이된다.

내가 한 것은 CSS의 320 x 480 sceen 크기를 수용하기 위해 모든 크기를 절반으로 만들었습니다. 탐색 모음을 50px (320x480)로 설정하고 @ 2x.png 이미지 (48x48)를 넣습니다.

휴대 전화에 앱을로드하면 48 픽셀이 고밀도의 24 픽셀 이미지로 표시되지 않는다는 인상을 주어야합니다.

나는 100px 탐색 막대를 만들면 고해상도를 목표로하면서 큰 크기를 타겟팅하면서 모든 것이 크게 보입니다. 내 시나리오에서 요소 (DIV)와 이미지를 어떻게 조정합니까?

답변

0

일반 및 고화질 디스플레이간에 스타일을 관리 할 수 ​​있도록하기 위해 CSS3 미디어 쿼리와 뷰포트 태그를 사용하여 이러한 기사를 살펴 보자

Targeting the iPhone 4 Retina Display with CSS3 media queries

iPhone 4 and iOS 4 Safari Detection and Behavior

+0

내가 사용하고 미디어 쿼리를 . 어떻게 든 정상적인 imagebis가 사용되고 @ 2x 파일이 대체 될 때 얻을 수 없습니다 – Volatil3

+0

코드는 여기에 제공됩니다 : ** titanum/html 코드 ** http://pastebin.ca/2176806 ** CSS ** http : //pastebin.ca/217680 – Volatil3

관련 문제