모바일 환경에서의 vh

문제인식 프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다. PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다. vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다. 예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 된다. 원인 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간(이 영역은 스크롤 방향에 따라 가변적)을 포함하기 때문이었다. 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간을 포함한다. URL바는 상황에 따라 보여지거나 없어지는 경우가 있는데, 100vh는 그에 따라 다시 측정되지 않는다. 해결 모바일 ..

2022.11.17

모바일 CSS 스타일링

모바일 CSS 스타일링 모바일의 화면은 좌우로 좁다. 따라서 길게 스크롤이 발생할 수 있다. 바로가기 메뉴처럼 썸네일 로 만들어진 메뉴를 아래로 배치하면 사용자들이 보지 못하고 넘어갈 가능성이 있 기때문에 적절한 메뉴갯수 와 함께 이미지를 사용해야 한다. 각 디바이스에 맞는 고정형 사이트가 있고 어떤 디바이 스에서 보던 잘 맞는 가변형 사이트가 있다. 서브페이지 에서는 반드시 뒤로가기 버튼과 첫화면으 로 돌아가는 버튼이 존재해 야 한다. 가로보기와 세로보기 테스트를 해도 화면벗어남이나 깨짐이 없어야 한다. 고정형 px값을 사용하지 않고 유동형 레이아웃(%)를 사용한다.

2021.12.22

mobile viewport 및 기타설정

viewport meta tag 모바일 기기에서 Media Query가 예상한대로 작동하기 위해서는 웹 브라우저의 가상 해상도를 물리적 해상도와 일치시킬 필요가 있습니다. 모바일 웹브라우저들은 웹브라우저의 가상 해상도를 조절할 수 있는 viewport meta tag를 지원합니다. viewport의 속성 width viewport의 가로 크기를 조정합니다. 일반적인 숫자값이 들어 갈 수 도 있고, device-width와 같은 특정한 값을 사용할 수도 있습니다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다. height viewport의 세로 크기를 조정합니다. initial-scale 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽..

2021.12.21