기타
웹 화면을 특정한 스마트 폰 모델(기종)의 해상도에 맞게 보는 방법 (반응형 웹 에뮬레이터)
안경잡이개발자 2021. 6. 4. 23:12
1. 원하는 스마트 폰 기종을 선택한다. 이때 본인이 가지고 있는 스마트폰의 기종(모델) 이름을 확인하는 방법은 간단하다. 안드로이드 스마트폰을 기준으로 [설정] - [휴대전화 정보] - [디바이스 이름]을 확인하면 된다. 예를 들어 필자의 경우 갤럭시 A7(Galaxy A7) 스마트 폰을 가지고 있다.
2. 스마트 폰 기종에 맞는 해상도를 검색한다.
▶ Galaxy A7 나무위키 정보: //namu.wiki/w/%EA%B0%A4%EB%9F%AD%EC%8B%9C%20A7
링크에 접속해 확인해 보면 다음과 같이 [디스플레이] 정보가 출력된다. 확인 결과 기본적으로 갤럭시 A7은 16:9의 비율을 가지며 해상도는 1920 X 1080이다. 이 비율 정보를 알아내는 것이 가장 중요하다.
3. 크롬(Chrome)에서 개발자 도구(F12)를 실행하여 [Toggle device toolbar]를 눌러 모바일 화면으로 볼 수 있도록 한다. 이후에 자신이 원하는 기종(모델)을 선택하여 화면을 볼 수 있다. 예를 들어 [Galaxy S5]를 선택한 뒤에 네이버에 접속하여 새로 고침을 하면 다음과 같은 화면을 만날 수 있다.
네이버의 경우 별도로 반응형 웹(responsive web)을 지원하기 때문에, 다음과 같이 모바일 화면이 나오는 것을 알 수 있다. 이와 같이 기존에 정의된 스마트 폰 모델에 대하여 바로 확인이 가능하다.
4. 필요한 경우 나만의 모바일 기종을 등록할 수 있다.
이때 다음과 같이 [Add custom devices...]를 누른 뒤에 원하는 이름으로 디바이스(Device)를 설정하여 넣도록 하자.
User-agent의 경우 다음과 같은 형식으로 넣을 수 있다.
필자의 경우 다음과 같이 화면이 나오는 것을 확인할 수 있었다.
이러한 기능과 개발자 도구를 잘 활용하면, 다음과 같은 가상의 디자인과 글을 빠르게 만들어 낼 수 있다. 이것은 영화나 다양한 비디오에서 연출 목적으로 많이 활용되기도 한다.
Web 프로그래밍/CSS
디바이스 브라우져 해상도 크기
오렌지셔츠 2015. 8. 27. 16:33
반응형 웹 (모바일 디바이스) 해상도
— 2014년 11월 27일반응형 웹 적용을 하기 위해서는 데스크탑 뿐만아니라 최소한 모바일 디바이스의 해상도는 알고 있어야 되겠지요.
이전에 정리했던 데이타에 최근 출시한 iphone6, iphone6 plus, 갤럭시 노트4, 삼성 갤럭시 노트 엣지 추가했습니다.
기본 해상도
480px | 스마트폰 |
800px | 태블릿 |
1024px | 넷북 |
1600px | 데스크톱 |
스마트폰 해상도 : 브라우져 해상도의 2배
아이폰4, 4S | 640 * 960 | 320 * 480 |
아이폰5(326ppi) | 640 * 1136 | 320 * 568 |
아이폰6(326ppi) | 750 * 1334 | 375 * 667 |
아이폰6 plus(401ppi) | 1242 * 2208 | 414* 736 |
갤럭시 S3 | 720 * 1280 | 360 * 640 |
갤럭시 넥서스 | 720 * 1280 | 360 * 640 |
갤럭시 노트 | 800 * 1280 | 400 * 640 |
갤럭시 노트2 | 720 * 1280 | 360 * 640 |
갤럭시 노트4 삼성 갤럭시 노트 엣지 | 1440 * 2560 [1440+160] (Quad HD+) * 2560 | 720 * 1280 |
태블릿 해상도
아이패드, 아이패드 미니 | 1024 * 768 | 1024 * 768 |
아이패드 레티나 | 1136 * 640 | 1136 * 640 |
넥서스 10 | 2560 * 1600 | 2560 * 1600 |
넥서스 7 | 1280 * 800 | 1280 * 800 |
서피스 | 1336 * 768 | 1336 * 768 |
갤럭시 Tab 7.7 LTE | 1280 * 800 | 1280 * 800 |
참고자료 : 반응형웹디자인(어비가 들려주는 생생한 반응형 웹디자인 노하우) – 송태민 지음
//sanghyuns.com/rwd-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%ED%95%B4%EC%83%81%EB%8F%84/