모바일 브라우저 해상도 - mobail beulaujeo haesangdo

기타

웹 화면을 특정한 스마트 폰 모델(기종)의 해상도에 맞게 보는 방법 (반응형 웹 에뮬레이터)

안경잡이개발자 2021. 6. 4. 23:12

1. 원하는 스마트 폰 기종을 선택한다. 이때 본인이 가지고 있는 스마트폰의 기종(모델) 이름을 확인하는 방법은 간단하다. 안드로이드 스마트폰을 기준으로 [설정] - [휴대전화 정보] - [디바이스 이름]을 확인하면 된다. 예를 들어 필자의 경우 갤럭시 A7(Galaxy A7) 스마트 폰을 가지고 있다.

2. 스마트 폰 기종에 맞는 해상도를 검색한다.

▶ Galaxy A7 나무위키 정보: https://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의 경우 다음과 같은 형식으로 넣을 수 있다.

Mozilla/5.0 (Linux; Android 4.4.4; SM-A700F Build/KTU84P)

  필자의 경우 다음과 같이 화면이 나오는 것을 확인할 수 있었다.

  이러한 기능과 개발자 도구를 잘 활용하면, 다음과 같은 가상의 디자인과 글을 빠르게 만들어 낼 수 있다. 이것은 영화나 다양한 비디오에서 연출 목적으로 많이 활용되기도 한다.

Web 프로그래밍/CSS

디바이스 브라우져 해상도 크기

오렌지셔츠 2015. 8. 27. 16:33

반응형 웹 (모바일 디바이스) 해상도

반응형 웹 적용을 하기 위해서는 데스크탑 뿐만아니라 최소한 모바일 디바이스의 해상도는 알고 있어야 되겠지요.
이전에 정리했던 데이타에 최근 출시한 iphone6, iphone6 plus, 갤럭시 노트4, 삼성 갤럭시 노트 엣지 추가했습니다.

기본 해상도

스마트폰 해상도 : 브라우져 해상도의 2배

태블릿 해상도

참고자료 : 반응형웹디자인(어비가 들려주는 생생한 반응형 웹디자인 노하우) – 송태민 지음

http://sanghyuns.com/rwd-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%ED%95%B4%EC%83%81%EB%8F%84/