-
[반응형 웹] 어떤 해상도의 기기가 가장 많을까? 해상도 점유율 확인하기프론트엔드 2022. 2. 10. 17:25
https://gs.statcounter.com/screen-resolution-stats 에서 해상도별 점유율을 확인할 수 있다.
Edit Chart Data를 눌러서 차트 형식 등을 변경할 수 있다.
내가 작업 중인 프로젝트는 데스크탑만 지원할 예정이기 때문에 차트를 편집해 데스크탑 해상도 점유율만 확인해봤다.
1920x1080, 1366x768 두 해상도의 점유율만 합쳐서 40퍼센트 이상으로 압도적이다.이렇게 해상도 점유율을 확인했다면, 점유율이 높은 해상도 위주로 내 프로젝트가 화면에서 어떻게 보이는지 체크해보면서 개선할 수 있다.
크롬 개발자 도구의 Toogle Device Toolbar를 사용해
특정 해상도에서 웹 페이지가 어떻게 보이는지 확인해볼 수 있다.
Toogle Device Toolbar를 사용하려면 개발자 도구 상단 왼쪽에서 두 번째 아이콘을 클릭하면 된다. Element 탭 왼쪽에 있다.velog(https://velog.io/write?id=1da8ec93-8ccf-42ae-a4fa-8bdcc69ce6fe)에서 이동해온 글입니다!
'프론트엔드' 카테고리의 다른 글
[Web] 세션/쿠키 인증과 토큰 인증(Access Token, Refresh Token) (0) 2022.02.10 [React] React에서 input 이벤트 사용하기 (onChange, onInput, onBlur) (0) 2022.02.10 [React] API 주소 환경변수로 분리하기 (개발서버/실서버) (feat.CRA, github-actions) (0) 2022.01.09 [React] React-Router-DOM 현재 선택된 메뉴 표시하기 (NavLink) (0) 2022.01.09 [CSS] 화면 클릭 시 생기는 파란 배경색 없애기 (0) 2022.01.09