Android용 Chrome에 적용될 표시 영역 크기 조절 동작 변경사항에 대비하기 | Blog | Chrome for Developers
Chrome for Developers
🐞 Android Chrome에서 CSS vh가 이상하게 동작했던 이유
- Android Chrome 108버전부터 레이아웃 표시 영역의 동작이 달라졌기 때문입니다.
---
몇 달 전, 회사에서 QA를 쳐내다가 이상한 버그를 발견했습니다. 유독 구형 안드로이드 기기에서 가상 키보드가 올라오면 CSS 단위인 vh가 이상하게 설정되고 있었기 때문입니다. 비교적 최신 기기였던 제 스마트폰에서는 정상 동작하구요.
이상하다 싶어서 원인을 찾아 봤는데, 알고 보니 크롬 108버전부터 브라우저가 레이아웃 표시 영역을 계산하는 방법이 달라졌기 때문이었습니다.
모바일 웹을 개발해보신 프론트엔드 개발자라면 아시겠지만, 모바일 브라우저에서는 화면에 보여지는 영역을 정확히 계산하는 것이 생각보다 쉽지 않습니다. 브라우저의 주소창, 가상 키보드의 영역, 핀치 줌을 이용한 화면 확대 등 다양한 요소로 인해 눈에 보이는 영역과 실제 계산된 영역이 다르게 나오기 때문입니다.
108 버전 미만의 크롬은 눈에 보이는 영역과 실제 레이아웃 영역의 크기가 동일했습니다. 즉, 가상 키보드가 떠올라서 눈에 보이는 화면이 줄어든다면 vh의 단위 크기도 줄어드는 것이었죠. 하지만 iOS, iPadOS에서의 크롬은 가상 키보드가 떠올라도 vh의 단위 크기가 줄어들지 않습니다. 눈에 보이는 영역이 줄었다고 해도, 실제 vh는 가상 키보드가 없었을 때의 높이를 그대로 계산하는 것이죠.
물론 이러한 문제를 해결하기 위해 dvh, svh 같은 CSS 단위가 생기긴 했지만, 구형 브라우저에서는 동작하지 않으므로 지원해야 하는 브라우저 범위가 넓은 경우에는 사용하기 어렵습니다.
이처럼 동일한 코드가 OS에 따라 서로 다르게 동작하는 문제가 있었기 때문에, 크롬 108버전부터는 크롬이 iOS의 동작을 그대로 따라가게 되었습니다. 즉 눈에 보이는 화면 크기가 줄더라도 레이아웃 영역 계산에 영향을 주지 않게 되었습니다. 이것이 바로 구형 기기에서만 문제가 발생했던 원인이었습니다.
혹시라도 여러분이 웹 개발 도중 구형 안드로이드 기기의 크롬에서만 뷰포트 관련 문제가 발생한다면, 이를 근거로 문제의 원인을 찾아보세요.
https://developer.chrome.com/blog/viewport-resize-behavior?hl=ko#opting-in-to-a-different-behavior
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 6월 8일 오전 10:11
댓글 0
함께 읽은 게시물
업계 한 관계자는 "올해 투자 유치 스타트업 중 웹 기반 트래픽만으로도 MAU 100만을 넘긴 사례들이 다수 등장했다"며 "특히 앱에 의존하지 않는 사용자 확보는 후속 투자와 기업가치 판단에도 중요한 기준으로 작용할 것"이라고 밝혔다.
... 더 보기
리모트 근무 3년차 회고
코로나 시국. 어쩌다 시작한 리모트 근무가 3년차를 맞이했다.
운좋게 코로나 창궐이후 쭉 자택근무를 이어왔고 그 기간동안 입사하신 분이 얼굴을 보며 일한 분보다 더 많아 지고 있다.
스몰 내향인인 나는 처음에는 자택근무를 열렬히 환영했지만, 요즘들어 과연 좋은가?
그간의 나의경험을 바탕으로 장단점을 분석해보았다.
단점
1. 알람에 집착하게 된다.
- 메세지를 보내면 1-2분안에 응답을 해야한다는 앞박에 오히려 몰입감있는 일이 잘 안된다.
- 잠깐 나갈때 혹시 메세지가 오지 않을까 핸드폰에 집착하게 되고, 어쩌다 노티 확인이 늦으면 너무 죄책감이 든다.
- 오히려 몰입감 있는 업무는 모두가 퇴근한 새벽에 잘된다.
2. 커뮤니케이션 중 글쓰기 능력이 무엇보다 중요해진다.
- 단점으로 보기 애매하지만 나는 불편해서 넣어보었다.
- 나는 말로 표현 하는 것과 그림그리는 걸 좋아하는 편인데. 아무래도 글로 명확한 표현을 하지 않으면 서로 오해하는 경우가 많다.
3. 화상회의는 의외로 얼굴이 너무 크게 보인다.
- 생각보다 얼굴이 너무 크게 잘 보여서 생각보다 많이 부담스럽다;
장점
1. 내 취향에 맞는 라이프 사이클 구축 가능
- 살고 싶은 동네, 환경, 인간관계를 구축할수 있다.
2. 인간관계에서 공사가 구분된다.
- 회사동료와 어색한 점심시간이 없다.
3. 문서화가 잘된다.
- 슬랙이든 wiki든 문서화되지 않아 불편했던 영역들도 모두 문서화가 되어서 히스토리 파악에는 더 용이하다.
제가 리드하고 있는 조직(당근마켓 커뮤니티실)에서 백엔드 엔지니어를 채용 중이에요.
커뮤니티실에는 동네 이웃들의 이야기와 정보를 공유하는 동네생활팀, 이웃 간의 취미와 관심사를 연결하는 모임팀, 그리고 아파트 단지 생활을 더 편리하고 즐겁게 만들어 줄 단지팀이 있어요. 지금 내 동네에서 일어나고 있는 일들을 더 쉽게 즐기고 공유할 방법들을 찾는 일이라면 무엇이든 도전하여 실행에 옮겨요. 만드는 사람이 불편할수록 쓰는 사람은 편하다는 믿음으로 도전적인 문제를 풀어나갈 분과 함께하고자 해요.
... 더 보기작년에 읽은 34권의 책 중 가장 좋았던 책
2
... 더 보기🙅무신사가 '팔지 않는 매장'을 만든 이유
이
... 더 보기
