Android의 Chrome 버전 56부터 URL 표시줄의 크기 조절 동작이 변경됩니다. 꼭 알아둬야 할 정보
뷰포트 단위 (예: vh)로 정의된 길이는 URL 표시줄이 표시되거나 숨겨짐에 따라 크기가 조정되지 않습니다. 대신 vh 단위는 URL 표시줄이 항상 숨겨져 있는 것처럼 뷰포트 높이에 맞게 크기가 조절됩니다. 즉, vh 단위는 '최대 가능한 뷰포트' 크기로 조정됩니다. 즉, 100vh는 URL 표시줄이 표시될 때 표시되는 높이보다 큽니다.
초기 포함 블록 (ICB)은 요소의 크기를 상위 요소를 기준으로 조절할 때 사용되는 루트 포함 블록입니다. 예를 들어 <html> 요소에 width: 100%; height: 100% 스타일을 지정하면 ICB와 동일한 크기가 됩니다. 이 변경사항으로 URL 표시줄이 숨겨져도 ICB의 크기가 조절되지 않습니다.
대신 URL 표시줄이 항상 표시되는 것처럼('가장 작은 표시 영역') 동일한 높이로 유지됩니다. 즉, ICB 높이로 크기가 지정된 요소는 URL 표시줄이 숨겨져 있는 동안 표시되는 높이를 완전히 채우지 않습니다.
위의 변경사항에는 한 가지 예외가 있습니다. position: fixed인 요소의 경우입니다. 동작은 변경되지 않습니다. 즉, 포함 블록이 ICB인 position:
fixed 요소는 URL 표시줄이 표시되거나 숨겨짐에 따라 크기가 조절됩니다. 예를 들어 높이가 100%이면 URL 표시줄이 표시되는지 여부와 관계없이 항상 표시되는 높이를 정확하게 채웁니다. 마찬가지로 vh 길이도 URL 표시줄 위치를 고려하여 표시되는 높이와 일치하도록 크기가 조정됩니다.
이번 변경사항에는 다음과 같은 이유가 있습니다.
휴대기기에서 사용할 수 있는
vh단위입니다. 그 전에는vh단위를 사용하면 사용자가 스크롤 방향을 변경할 때마다 페이지가 불안정하게 리플로우되었습니다.사용자 환경이 개선되었습니다. 사용자가 읽는 동안 페이지가 리플로우되면 문서에서 상대 위치를 잃을 수 있습니다. 이는 불편할 뿐만 아니라 페이지를 다시 레이아웃하고 다시 칠하기 위해 프로세서 사용량과 배터리 소모가 증가합니다.
iOS의 Safari와의 상호 운용성이 개선되었습니다. 새 모델은 Safari의 작동 방식과 일치해야 하며, 이를 통해 웹 개발자의 작업이 더 쉬워집니다.
vh단위를 최대한 큰 뷰포인트로, ICB를 최대한 작게 만드는 직관적이지 않은 선택은 Safari의 동작과 일치시키기 위함입니다.
URL 표시줄이 숨겨진 상태로 고정된 전체 화면 시나리오의 경우 ICB는 전체 화면 높이를 사용합니다. 이는 URL 표시줄이 스크롤 시 표시되지 않으므로 '최소 표시 영역'이 전체 표시 영역이므로 위의 정의와 일치합니다.
데모
- 다음은 데모입니다.
페이지 오른쪽에 있는 네 개의 막대는 스크롤 가능한 페이지에 제공된
99%,99vh,position:fixed,position:absolute의 모든 가능한 조합입니다. URL 표시줄을 숨기면 각 옵션에 미치는 영향을 확인할 수 있습니다. 크기 조절 이벤트가 페이지 아래쪽에 인쇄됩니다.
지원
- Android의 Chrome 56