2012-05-23 3 views
10

고밀도 화면이있는 새 휴대 전화에서 픽셀 크기에 대한 이해를 돕기 위해 누군가가 필요합니다. 이후, 그것은 내 웹 디자인에 커브 볼을 던지고 있습니다.스마트 폰용 웹 디자인 - 픽셀 크기

스마트 폰에 대한 나의 초기 이해는 픽셀 크기가 대략 480 x 320 이었기 때문에 픽셀이 여전히 동일한 픽셀이므로 설계가 쉬워졌습니다.

그러나 일부 스마트 폰은 이보다 2 배 이상입니다. 나는 iPhone이 실제로 960 x 640에서 두 배가된다고 믿습니다. Galaxy Nexus는 1280 x 720입니다.

이제 %를 사용할 때이 기능이 잘 작동합니다. 그러나, 픽셀 값을 수정하기 위해 사용하고 싶은 많은 것들이 있습니다. 예를 들어, 많은 높이 값이 % s에있을 필요는 없습니다. 또한 높이가 고정되어 있으면 로고, 아이콘, 일부 그림과 같은 일부 항목은 폭이 넓어지면 확장되지 않으므로 일관성있는 값이 필요합니다.

그러나 픽셀이 실제로 일관된 물리적 측정이 아닌 경우 어떻게 처리해야합니까?

예제를 사용할 때 더 쉽습니다. 누군가가 내게 설명해 줄 수 있다면, 예를 들어 아이콘을 말하십시오.

내 휴대 전화에서 Facebook에 로그인하면 내비게이션 바에 친구 요청, 메시지 및 기타 항목과 같은 세 가지 알림 아이콘이 표시됩니다. 이들은 고쳐졌습니다. 내가 휴대 전화를 똑바로 세워 놓았는지 아니면 똑바로 세우 든, 그들은 똑같은 크기를 유지합니다. 너비가 바뀌는 유일한 것은 ... 본질적으로 내가하고있는 것 사이의 공간입니다.

이 아이콘의 측정치는 무엇입니까? 하나는 표준 아이콘이 보통 16x16임을 압니다. 그렇다면이 고밀도 스마트 폰에서 32x32가 필요합니까? 그러나 데스크톱에서도 볼 수있는 16x16 아이콘과 크기가 같지 않습니다. 아마도 12x12보다 더 많이 보입니다. 확실하지는 않지만 데스크톱 용 스마트 폰을위한 다른 "표준"아이콘 크기가 있다고 생각합니다 (그게 무엇입니까?).

어쨌든 모바일 레이아웃을 얻기 위해 휴대 전화를 사용하고 있음을 나타내는 CSS가 있습니다. 그러나 픽셀 밀도를 인식하고 내 고정 값을이 경우 두 배로 조정하려면 한 걸음 더 나아가 야합니까? 또는 다른/더 좋은 방법이 있습니까?

모든 도움을 주시면 감사하겠습니다. 나는 약간 혼란스럽고 여기에 많은 정보가 없다. 감사와 긴 게시물에 대한 미안 해요!

+0

는 소리. 망막 디스플레이는 픽셀 비율이 2 : 1입니다 (망막의 한 픽셀은 일반 디스플레이의 2와 같습니다). 이렇게하면 해상도가 예상보다 두 배 커지는 것처럼 보일 수 있습니다. 이 주제에 대해 많은 논의가 진행 중입니다. 검색을 통해 기사를 찾을 수있을 것입니다. –

+0

여기에 더 많은 정보를 줄 수있는 기사가 있습니다 (많은 정보가 있습니다) http://menacingcloud.com/?c=highPixelDensityDisplays –

답변

6

장치의 픽셀 밀도 목록 : http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ 문제는 아마도 비율의 변화 일 것입니다.여기

내가 개인적으로 끝으로 건너 뛰기

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

참조하고자 몇 가지 반응 연구를 커버하는 좋은 기사입니다; 예를 들어, 아이폰 4 망막 디스플레이 화소 밀도 더블 여기 (시험하지 않았다)을 타겟팅 상기 문서의 일례이다 http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

2 명 화상을 확인하는 데에 약간의 정보를 제공하는 다른 문서 다른 PPI와 http://bjango.com/articles/designingforretina/

나는 개인적으로 CSS를 사용하여 디자인의 레이아웃 트위터의 부트 스트랩 &의 응답 플러그인을 사용 : 문제가 픽셀 비율처럼 http://twitter.github.com/bootstrap/scaffolding.html#responsive

+0

감사합니다! 그것들은 제가 요청할 수있는 가장 유용한 링크들 중 일부였습니다. – jstacks

+2

위키 백과 문서가 삭제되었습니다. 다음은 픽셀 크기가 다른 장치 목록입니다. http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ – steel

관련 문제