모바일웹 프로토타입 제작 시 화면 비율 설정

모바일웹 프로토타입 제작 시 화면 비율 설정

Summary:

모바일웹 프로토타입을 제작할 때 화면 비율을 설정하는 방법에 대해 알아봅니다.


모바일기기 별 화면 사이즈

SCREEN SIZ.ES는 기기별 크기, 가로&세로 길이, 해상도, 비율 정보를 제공한다. 스마트폰, 태블릿, PC 화면의 상세사항 모두 확인할 수 있다.


반응형 웹 테스터

다음 트로이에서 웹 프로토타이핑 후 여러 기기별로 어떻게 화면이 나오는 지 테스트해볼 수 있다.


해상도 설정

위 사이트에 접속하면 알 수 있듯이 모바일은 기기별로 해상도가 다 다르다. 그렇다면 자신이 개발하고자 하는 웹의 해상도를 어떻게 설정해야 할까. 임의로 보편적인 해상도를 설정하고 각 항목 크기를 픽셀 단위가 아닌 퍼센트, rem 단위로 지정하면 모바일 기기에 따라 차이가 나는 것을 줄일 수 있다.

html의 <meta> 태그에 <viewpoint> 속성을 추가하는 것도 모바일 기기의 폭에 사이트를 맞추는 방법 중 하나다.


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora