다양한 기기에서 웹 페이지의 표시를 확인하는 방법

web어플리케이션을 개발하고 있다면, 여러가지 단말(OS나 사이즈)로 확인할 필요가 있지요.
자신이 가지고 있는 단말기만으로 확인하는 것은 물리적으로도 예산적으로도 현실적이지 않습니다.

하지만 괜찮아, 대부분의 브라우저에는 검증 모드(developer mode) 되는 기능이 있어, 그 기능을 사용하면 다양한 단말을 에뮬레이트 할 수 있습니다.

이 도움말에서는 Google 크롬을 사용하여 다양한 크기의 기기를 확인하고 설정을 추가하는 방법에 대해 설명합니다.

이 기사에서 설명 /하지 않는 것

하는 것

Google 크롬에서 기기 크기를 의사 적으로 변경하여 웹 페이지의 표시를 확인하는 방법

Google 크롬에 새로운 기기 설정 (※ 1)을 추가하는 방법

※1 단말기 설정
- 이름
- 사이즈
- UserAgent
등

하지 않는 것

Chrome의 자세한 사용법

새 기기 설정을 추가하는 방법

새 UserAgent를 추가하는 단계

1. 오른쪽 클릭 → 검증(Inspect)

2. 장치 표시

3. Edit 화면 열기

4. 장치 추가 화면 열기

5. 장치 설정 추가

Tips

프로그래머 전용이지만 사용자 에이전트를 확인하는 미니 프로그램입니다.
문자열 일치 등을 걸 때 표기 흔들림의 영향을 피하는 버릇으로 별도로 모두 소문자로 변환하고 있습니다.

var ua = navigator.userAgent.toLowerCase();
console.log(ua);

요약

좋은 웹 라이프를!

참고문헌

userAgent(사용자 에이전트 목록)

조금 낡습니다만, 많이 정리되어 있습니다.

List of mobile browser User-Agent strings