Android용 Chrome 버전 56부터 URL 표시줄의 크기 조절 동작이 변경됩니다. 꼭 알아둬야 할 정보
표시 영역 단위에 정의된 길이 (예: vh)는 URL 표시줄이 표시되거나 숨겨지더라도 크기가 조절되지 않습니다. 대신 URL 표시줄이 항상 숨겨져 있는 것처럼 vh 단위가 표시 영역 높이에 맞게 조정됩니다. 즉, 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 표시줄이 숨겨진 상태로 잠겨 있는 전체 화면 시나리오에서는 IB가 전체 화면 높이를 사용합니다. 이는 URL 표시줄이 스크롤 시 표시되지 않으므로 '가능한 가장 작은 표시 영역'이 전체 표시 영역이 되기 때문에 위의 정의와 일치합니다.
데모
- 다음은 데모입니다.
페이지 오른쪽에 있는 막대 4개는 스크롤 가능한 페이지에 제공된
99%,99vh,position:fixed,position:absolute의 가능한 조합입니다. URL 표시줄을 숨기면 각 URL에 미치는 영향이 표시됩니다. 크기 조절 이벤트는 페이지 하단에 출력됩니다.
지원
- Android의 Chrome 56