브라우저별 높이값 / 웹디자인시 캔버스 높이값
사소하지만 UI 디자이너들이 자주 실수하게되는 영역, 웹브라우저 캔버스
웹디자인시 포토샵이나 타 그래픽 프로그램에서 - 1920 x 1080 해상도를 그대로 반영할 경우, 디자인 비례에 문제가 생기기 쉽다. 웹브라우저 UI와 윈도우 OS 기본 하단바의 영역이 가려져서, 실제 웹브라우저에 그려지는 캔버스 높이값이 달라지기 때문이다.
Edge 브라우저
MS Edge 브라우저 : 높이값 77px (상단: 32px / 주소창 영역: 45px)
Firefox 브라우저
Firefox 브라우저 : 높이값 74px (상단: 33px / 주소창 영역: 41px)
IE 브라우저
MS IE 브라우저 (기본) : 높이값 78px (상단: 27px / 주소창 + 탭 영역: 51px)
Opera 브라우저
Opera 브라우저 : 높이값 70px (상단: 31px / 주소창 영역: 49px)
Safari 브라우저
애플 safari 브라우저 : 높이값 60px (상단: 23px / 주소창 영역: 37px)
Chrome 브라우저
구글 크롬 브라우저 : 71px (상단: 34px / 주소창 영역: 37px)
브라우저별 높이값 / 1920x1080 해상도 기준
MS IE 브라우저 (탭 영역 접을 경우) : 높이값 55px (상단: 23px / 주소창 영역: 41px)
MS IE 브라우저 (기본) : 높이값 78px (상단: 27px / 주소창 + 탭 영역: 51px)
애플 safari 브라우저 : 높이값 60px (상단: 23px / 주소창 영역: 37px)
Opera 브라우저 : 높이값 70px (상단: 31px / 주소창 영역: 49px)
구글 크롬 브라우저 : 71px (상단: 34px / 주소창 영역: 37px)
Firefox 브라우저 : 높이값 74px (상단: 33px / 주소창 영역: 41px)
MS Edge 브라우저 : 높이값 77px (상단: 32px / 주소창 영역: 45px)
+ 윈 10 기본 하단바 : 높이값 40px
- 1080 높이값에서 브라우저 UI에 의해 55~77px이 가려짐
- 윈도우 기본 하단바에 의해 40px이 추가로 가려짐
결론: 대략적으로 970~980 정도의 높이값을 웹디자인을 위해 사용 가능
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
