URL 표시줄 크기 조정

데이비드 보칸

버전 56부터 Android용 Chrome에서 URL 표시줄의 크기 조절 동작이 변경됩니다. 꼭 알아둬야 할 정보

표시 영역 단위 (예: vh)에 정의된 길이는 URL 표시줄이 표시되거나 숨겨지는 상황에 따라 크기가 조절되지 않습니다. 대신 URL 표시줄이 항상 숨겨지는 것처럼 vh 단위의 크기가 표시 영역 높이에 맞게 조정됩니다. 즉, vh 단위는 '가능한 가장 큰 표시 영역'으로 크기가 조절됩니다. 즉, 100vh이 URL 표시줄이 표시될 때 표시되는 높이보다 큽니다.

초기 포함 블록 (ICB)은 상위 요소를 기준으로 요소의 크기를 조정할 때 사용되는 루트 포함 블록입니다. 예를 들어 <html> 요소에 width: 100%; height: 100% 스타일을 지정하면 ICB와 크기가 같습니다. 이번 변경으로 URL 표시줄이 숨겨져도 ICB의 크기는 변경되지 않습니다. 대신 URL 표시줄이 항상 표시되는 것처럼 높이가 동일하게 유지됩니다('가능한 가장 작은 표시 영역'). 즉, URL 표시줄이 숨겨져 있는 동안에는 ICB 높이에 맞게 크기가 조정된 요소가 표시되는 높이를 완전히 채우지 않습니다.

위 변경사항에 한 가지 예외가 있으며, 이는 position: fixed인 요소에 적용됩니다. 동작은 변경되지 않습니다. 즉, 포함 블록이 ICB인 position: fixed 요소는 URL 표시줄이 표시되거나 숨겨짐에 따라 크기가 조절됩니다. 예를 들어 높이가 100%이면 URL 표시줄 표시 여부와 관계없이 항상 표시되는 높이를 정확히 채웁니다. 마찬가지로 vh 길이의 경우 URL 표시줄 위치를 고려하여 표시된 높이와 일치하도록 크기가 조절됩니다.

이러한 변경이 적용되는 데는 몇 가지 이유가 있습니다.

  • 모바일에서 vh 단위를 사용할 수 있습니다. 이전에는 vh 단위를 사용하면 사용자가 스크롤 방향을 변경할 때마다 페이지가 부자연스럽게 리플로우되었습니다.

  • 사용자 환경 개선 사용자가 읽는 동안 페이지가 리플로우되면 문서에서 상대적인 위치가 손실될 수 있습니다. 이는 번거롭지만 페이지 레이아웃을 재배치하고 다시 그릴 때 프로세서 사용과 배터리 소모가 추가로 발생합니다.

  • iOS에서 Safari와의 상호 운용성이 개선되었습니다. 새 모델은 Safari의 동작 방식과 일치하므로 웹 개발자의 작업이 더 편해집니다. vh 단위를 가능한 가장 큰 표시 영역으로 만들지만 ICB를 가장 작은 표시 영역으로 만드는 직관적이지 않은 선택은 Safari의 동작을 일치시키는 것입니다.

URL 표시줄이 숨겨진 상태로 잠겨 있는 전체 화면 시나리오의 경우 ICB는 전체 화면 높이를 사용합니다. 스크롤 시 URL 표시줄이 표시되지 않으므로 '가능한 가장 작은 표시 영역'이 전체 표시 영역이 되므로 위의 정의와 일치합니다.

데모

  • 다음은 데모입니다. 페이지 오른쪽의 막대 4개는 스크롤 가능한 페이지에서 제공되는 99%, 99vh, position:fixed, position:absolute의 가능한 조합입니다. URL 표시줄을 숨기면 각각의 URL에 미치는 영향을 확인할 수 있습니다. 크기 조절 이벤트가 페이지 아래에 출력됩니다.

지원

  • Android용 Chrome 56